元素大小的 CSS Rem 单位

Question

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

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

但它是否适当且值得信赖？

Answer 1

我想这取决于你。

我通常申请:

• REM for font-sizes with px callback，最好!
• 填充和边距的 EM
• 元素大小的 px、%、vw 和 vh
• 对于媒体查询，我使用 em，但通常也使用 rem 和 px。

如果你使用 em 作为 font-size，你可能会弄乱所有带有子元素的东西，所以不推荐。

大小元素的 REM 很有趣，但我很喜欢 vw 和 vh 在某些 % 不够的情况下的响应行为。

你可以用 CSS calc function 做一些很酷的事情

如 width: calc(100% - 85px); 用于您设计中的某些固定尺寸。

这是一个 Recommended read关于单位:)希望对您有所帮助。