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

rem和em 2020-6-2

时间:2020-06-02 23:01:56      阅读:66      评论:0      收藏:0      [点我收藏+]

标签:web开发   字体大小   浏览器   相对   的区别   pre   开发   rem   设置   

web开发中使用em单位还是rem?

一般浏览器的默认字体大小(font-size)是16px,为了实现弹性布局,即当页面缩放时,整个页面的元素可以一起跟着缩放,以免页面布局被破坏,建议不使用px作为固定的单位,而是使用em和rem相对单位。

假设html默认的字体大小为16px,那么1em/1rem = 1*16px = 16px
可以这样来设置浏览器的字体:

html{
     font-size:100%;
    }

em和rem的区别:
em的参考值是使用em的元素的字体大小,而rem的参考值是根元素(html)的字体大小。
举个例子,当前div的字体大小为20px:

  • 如果设置margin为1em,那么浏览器解析得到的margin值为20px;
  • 如果设置margin为1rem,那么浏览器解析得到的margin值为16px。

rem和em 2020-6-2

标签:web开发   字体大小   浏览器   相对   的区别   pre   开发   rem   设置   

原文地址:https://www.cnblogs.com/rachel-i/p/13034115.html

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