CSS单位（字体）

px\em\rem三者介绍

px

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。

因此，为了换算方便，通常我们会在HTML的根元素设置：

html { font-size: 100%; }

使得1em=10px，这样就可以很容易换算过来

rem

rem是CSS3新增的一个相对单位（root em，根em）。区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

兼容rem问题

为了兼容rem，可以多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

对比与分析

总的而言，三者都是相对单位，但是相对的对象不同，px是相对分辨率、em是相对于父容器字体、rem是相对于html根元素字体。

• px的好处是兼容性好，然而维护性差（因为如果没有预先规定好，字体从14px升级到16px大小，就可以改死人了。）

• em的好处是维护性和兼容性都不错，然而可能造成层级性的问题。（例如父元素是50%，然后第二层元素50%，最后一层元素的em就只剩下25%了）如下：

  <div style="font-size: 50%;">
  <div style="font-size: 50%;">
      kkkkkk
      <div style="font-size: 1em">
      kkkkkkk222222
      </div>
  </div>
  </div>

  最内一层的字体大小为：1em = 16*50%*50%=4px

  在代码很复杂的情况下，就很容易造成样式混乱

• rem的好处是维护性强，相对于根元素也不会出现层级问题的出现。但基于CSS3的它，会不被IE8兼容，因此需要px来做fallback处理。

注意事项

​ 还有一点注意事项是，基本上以上单位都是用来进行文字的修改的。如果你想用于height、width等属性。那么调整font-size属性是不生效的。那么em就是默认值16px，rem则是根据HTML的font-size做调整。

参考文章：

分析css中px、em和rem单位区别