css中rem使用

在学习Vue课程中,使用到rem来代替原来的px,rem是相对于根元素<html>,这样就意味着,我们只需要在跟元素确定一个参考值,这个参考值设置多少,完全可以根据自己的需要来确定。

浏览器中的默认字体大小为16px,根据这个值就可以判断设置rem的大小了

px rem
12 12/16 = .75
14 14/16 = .875
16 16/16 = 1
18 18/16 = 1.125
20 20/16 = 1.25
24 24/16 = 1.5
30 30/16 = 1.875
32 32/16 = 2

为了方便计算,可以将根元素的字体大小设置成10px,或者为62.5%,这样就会更方便计算

px rem
12 12/10 = 1.2
14 14/10 = 1.4
18 18/10 = 1.8
20 20/10 = 2

同时rem是css3的新添加的属性,需要考虑到浏览器的支持度。rem在众多浏览器中都已得到很好的支持,如果您的项目不用考虑IE低版本的话,你就可以放心的使用了

如果根元素中没有设置font-size的值的话,则按照默认浏览器以16px计算