- rem是CSS3中新增加的单位值
- rem和em都是相对单位
rem和em的不同点:
1.em是相对于元素的的父元素的font-size进行计算。
缺点:当父元素多层使用font-size时,可能会带来无法预知的错误。
2.rem是相对于根元素html的font-size进行计算。
rem和em的区别说完后,就介绍rem和px之间的转换吧。(带着愉快的心情去了解吧,欧耶)
px和rem之间的转换关系:(假设使用的浏览器默认的字号是16px)
px | rem |
---|---|
12 | 12/16=0.75 |
14 | 14/16=0.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 |
36 | 36/16=2.25 |
42 | 42/16=2.625 |
48 | 48/16=3 |
如果你要设置一个不同的值,那么需要在根元素 <html>
中定义,为了方便计算,时常在<html>
元素中设置font-size值为62.5%。
html{
font-size:62.5%; /* (10/16)*100%=62.5% */
}
相当于在html中设置font-size为10px;此时转换关系值就有所改变
px | rem |
---|---|
12 | 12/10=1.2 |
14 | 14/10=1.4 |
16 | 16/10=1.6 |
18 | 18/10=1.8 |
20 | 20/10=2 |
24 | 24/10=2.4 |
30 | 30/10=3 |
36 | 36/10=3.6 |
42 | 42/10=4.2 |
48 | 48/10=4.8 |
我们可以用除法公式来记 被除数÷除数=商(a÷b=c)
被除数是:要设置的字体大小
除数是:html中的font-size值
商就是:rem啦
总结为:要设置的字体大小÷html中的font-size值=rem
如有错误,还望订正,谢谢。