元素大小的CSS Rem单位

Question

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

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

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

Answer 1

我认为这取决于你。

我通常会申请：

• 带有px回调的字体大小的REM，最好！
• EM用于填充和边距
• px，％，vw和vh的元素大小
• 对于媒体查询我使用em，但通常也使用rem和px。

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

REM对于大小元素很有意思，但是对于某些％不够的情况，我很喜欢vw和vh的响应行为。

你可以用CSS calc function

做一些很酷的事情

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

这是关于单位的Recommended read :) 希望这能帮助你。