rem用来设置字体大小，也可以用于网格布局。rem中的r代表根元素，它的值就是根元素设置的字体大小。在大多数情况下，根元素就是html了。这个单位可以解决em设置字体时，由于继承带来的问题，具体如下：
body {
font-size: 14px;
}
div {
font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}
假设html存在这样的结构：
<body>
<div>
Test <!-- 14 * 1.2 = 16.8px -->
<div>
Test <!-- 16.8 * 1.2 = 20.16px -->
<div>
Test <!-- 20.16 * 1.2 = 24.192px -->
</div>
</div>
</div>
</body>
但是用rem能避免
html {
font-size: 14px;
}
div {
font-size: 1.2rem;
}
这样在上面的那三个嵌套的div的字体大小都是 1.2*14px = 16.8px 了。
在布局中，如下：
.container {
width: 70rem; // 70 * 14px = 980px
}
呵呵，rem只是用来设置字体大小，没有谁告诉你rem可以设置width和height
最好不用！
参考：https://segmentfault.com/q/1010000002771372
扫一扫
1346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
