CSS Rem单位用于元素尺寸的设置

Question

我注意到REM单位可以用于元素的大小，而不仅仅是字体大小。在HTML字体大小属性中非常有用。

html { font-size:1vw }
@media all and (max-width:720px) {
    html { font-size:10px }
}
#el { width:20rem;height:5rem }

但是它合适且可靠吗？

- Digerkam

Answer 1

我认为这取决于你。

我通常使用：

• REM 用于字体大小，px 回调是最好的选择！
• EM 用于填充和边距
• px、%、vw 和 vh 用于元素尺寸
• 媒体查询时我使用 em，但 rem 和 px 也很常见。

如果使用 em 进行字体大小设置，则可能会影响子元素，因此不建议使用。

对于元素尺寸，REM 是个有趣的选择，不过我也非常喜欢 vw 和 vh，用于某些情况下响应式设计时 % 不够用的地方。

并且，您可以使用 CSS 的 calc 函数

例如，在设计中一些固定大小的元素上使用width: calc(100% - 85px);。

这是一个关于单位的推荐阅读资源 :) 希望这能帮到您。

- Héctor León