码迷,mamicode.com
首页 > 其他好文 > 详细

em和rem

时间:2018-08-06 15:18:02      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:div   使用   失效   字体大小   4.4   css   1.2   size   14.   

同: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。

em和rem

标签:div   使用   失效   字体大小   4.4   css   1.2   size   14.   

原文地址:https://www.cnblogs.com/mm152534/p/9430183.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!