rem是CSS中的一个相对长度单位,它相对于HTML根元素的font-size计算值。
例如,如果HTML的font-size为16px,1rem then = 16px. 如果你将HTML的font-size设置为20px,那么1rem变为20px。
rem主要有以下优点:
1. 方便统一调整元素大小。通过单独改变根元素的font-size就可以轻松改变所有rem单位的元素大小。这在需要响应式布局时很有用。
2. 避免多层嵌套导致的问题。使用px作为长度单位时,在多层嵌套下,外层元素的px值会影响内层元素的实际px值,造成意料之外的大小变化。而rem作为相对单位,不会受外层元素影响,它的值始终相对于根元素font-size。
3. 兼容性好。rem单位现已得到很好的支持,IE9+、Firefox、Chrome、Safari、Android 4.0+、iOS 6+等都支持rem。
举个简单的例子:
html
<html style="font-size: 20px">
<div style="width: 10rem;">div</div>
</html>
这里div的宽度为10rem,因为html的字体大小为20px,所以div的实际宽度为10 * 20 = 200px。
如果我们将html的字体大小改为16px:
html
<html style="font-size: 16px">
<div style="width: 10rem;">div</div>
</html>
则div的宽度变为10 * 16 = 160px。
所以,通过改变根元素的font-size,我们可以轻易调整rem单位的元素大小,这使得rem十分适合用于响应式布局。
目前,rem和em都是较为流行的相对单位,但相比而言,rem由于其相对于页面的根元素,值不会随着元素嵌套层级增加而变化,所以在响应式开发中更加常用。如果需要实现精准绝对长度,也可以px与rem结合使用。
网友评论