rem和em 2020-6-2

Posted 2020-12-07 rachel-i

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。