[css] 第244天 使用rem时应该注意什么？

[haizhilin2013]

第244天 使用rem时应该注意什么？

我也要出题

[15067832187]

设置根元素的字体大小；

[fxwing]

宽高用rem设置，在移动端会适配吗？

[lwl0812]

看了下 绝对单位 和 相对单位。

em 是相对元素本身的 font-size 的相对单位，比如元素本身的 font-size 是 14px，那么 1.2em = 1.2 * 14px = 16.8px。注意，是相对元素本身的 font-size，会随着元素的 font-size 的改变而改变。

rem 是 root em 的缩写，相对根元素的 font-size 相对单位，比如根元素的 font-size 是 14px，那么 1.2rem = 1.2 * 14px = 16.8px。注意，是相对根元素的 font-size，不论元素处于什么位置，乘法的基数都是 14px(根元素的 font-size)。

em 一半用于设置元素的 padding, margin, border-radius 等。 rem 一半用于设置元素的 font-size。 px 一半用于设置 border。

如果用 em 设置 font-size 很容易会出现意想不到的问题。比如嵌套的 div。

// css
div {
  font-size: 0.8em;
}

<!--html-->
<div>
div1
<div>div2</div>
</div>

上面的代码，假设根元素用的是默认值 16px，那么第一个 div 的字体是 0.8 16px = 12.8px，第二个 div 的字体会先继承第一个 div 的 font-size = 12.8px，然后再乘以 0.8，0.8 12.8px = 10.24px，就会导致两个 div 的字体不一样大。

如果使用的是 rem，那么基数都是 16px，两个 div 的大小都是 12.8px。

---

先到这里，后续再补充。 不想敲了，直接放链接：https://www.yuque.com/u115242/pt75h6/our3wx

[forever-z-133]

需要注意 @media 时不管用 px 还是 rem 都不太靠谱了， 至于不能拥有 100vh 这样的效果其实也还好。