-前言-

「rem」是指根元素（root element）的字体大小，那么它的优点也就是不会随着父元素的字体大小变化而变化了，减少了父子元素之间字体大小计算的复杂程度。

建议事先参阅一章节。

尺寸单位也不知rem、em、px这三种，因为上面这三种最为常用，或者说将来最为常用，下面进入正题。

 

-正文-

几乎大部分浏览器出奇的一致，根元素 html 的默认字体大小都是 16px，那么为了方便计算，我们把这个单位变为10，也就是 10÷16=62.5%。那么其他元素在设置字体大小时是这样的：

h1 {
      font-size: 24px; font-size: 2.4rem; /* 24÷10=2.4 */}

 

** 为了兼容其他不支持「rem」的浏览器，我们需要同时设置 px 为单位的字体大小。 **

 

一、区别

em是相对于当前元素的字体大小；

rem是相对于根元素html的字体大小；

二、优点

em需要知道当前元素的字体大小，需要繁琐的计算；

rem相对轻松多了，只需要参考根元素的字体大小就可以了；

核心代码如下：

html{  /*浏览器默认字体16px，这里规定根元素的字体大小为10px*/  font-size:62.5%;}body{  /*设置bod的字体大小为14px*/  font-size:1.4rem;}div{  /*设置div的字体大小为12px*/  font-size:1.2rem;}

 

** rem的兼容性很好，只有ie6-ie8不支持，其他标准浏览器都支持。 **

 

 

 px&rem换算利器：

   

r98a