rem
是CSS3中新增加的一个单位值,他和em
单位一样,都是一个相对单位。不同的是em
是相对于元素的父元素的font-size
进行计算;rem
是相对于根元素html
的font-size
进行计算。这样一来rem
就绕开了复杂的层级关系,实现了类似于em
单位的功能。
Rem的使用
前面说了em
是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小,在我们多次使用时,就会带来无法预知的错误风险。而rem
是相对于根元素<html>
,这样就意味着,我们只需要在根元素确定一个参考值,这个参考值设置为多少,完全可以根据您自己的需求来定。
假设就使用浏览器默认的字号16px
,来看一些px
单位与rem
之间的转换关系:
如果你要设置一个不同的值,那么需要在根元素<html>
中定义,为了方便计算,时常将在<html>
元素中设置font-size
值为62.5%
:
相当于在<html>
中设置font-size
为10px
,此时,上面示例中所示的值将会改变:
由于rem
是CSS3中的一个属性,很多人首先关注的就是浏览器对他的支持度,我截了一张caniuse对rem
属性的兼容表:
从上图可以清楚的知道,rem
在众多浏览器中都已得到很好的支持,如果您的项目不用考虑IE低版本的话,你就可以放心的使用了,如果您的项目在IE低版本中还占有不少的比例,那么你还在担心使用rem
不能兼容,而不敢使用。其实是没有必要的,可以针对低版本的IE浏览器做一定的处理:
这样一来解决了IE低版本的不能兼容的问题,但生出另一个不足地方,就是增加了代码量。必竟鱼和熊掌很多时候不能兼得嘛。
如果你想更深入的了解rem
如何使用,建议您阅读: