em和rem

同：em和rem都是相对单位。

异：em是相对于父元素，而rem是相对于根(html)元素。

 

 

浏览器默认为16px；

将body设为62.5%；

1rem=16px*62.5%-10px;

 

<html>
　　<div>
　　　　<p> 你猜我字体是多大？</p>
　　</div>
</html>
/******css样式*********/
html{
　　font-size:62.5% // font-size:10px 1em:10px
}
div{
　　font-size:1.2em //font-size: 10 *1.2 =12px
}
p{
　　font-size:1.2em //font-size= 12*1.2=14.4px
}

 

 

1 若没有在根元素（html字体）指定参照值，那浏览器默认1 rem就是16px,若指定值，则1rem就是指定值 
2 html设置为62.5%或者10px时会失效，是因为 小于12px或者75%的字体大小 不支持换算。这可能与有些浏览器不支持12px以下的大小有关。所以，使用rem单位，html的字体默认字体大小必须设置为12px或以上。若小于12px则浏览器换算时自动默认字体为12px。

posted @ 2018-08-06 14:52  有荷  阅读(206)  评论(0)    收藏  举报