css3_关于px、em、rem的区别详解

前言

• 在CSS中，尺寸单位分为两类：相对长度单位和绝对长度单位。
  • 相对长度单位：按照不同的参考元素，又可以分为字体相对单位和视窗相对单位。
    • 字体相对单位：em、ex、ch、rem；
    • 视窗相对单位：vw、vh、vmin、vmax。
  • 绝对长度单位：则是固定尺寸，它们采用的是物理度量单位：cm、mm、in、px、pt以及pc。但在实际应用中，我们使用最广泛的则是em、rem、px以及百分比（%）来度量页面元素的尺寸。

px单位

  px是像素单位，也是绝对长度单位的一种。也就是说它的尺寸是固定的，不会跟随其它元素的变化而变化。因此，在实际项目开发当中，如果需要自适应不同分辨率的效果，那么用px为单位去开发是不可行的。

em单位

  em是相对长度单位，它是用来设置文本的字体尺寸的，并且它是相对于当前对象内文本的字体尺寸。如果当前对象的字体尺寸未被定义，则相对于浏览器的默认字体尺寸。

 px与em换算的举例说明：

  一般游览器默认为 1em = 16px，在此默认的字体大小情况下，可知：0.625em = 10px。因此，以此为例，如果我们给根元素（也就是当前对象）设置样式 font-size：0.625，相当于字体扩大了0.625倍，在默认字体大小是16px的情况下，那么根据em的理解，em是相对于当前对象内文本的字体尺寸。因此，如果我们给根元素里面的某一div一个margin：1em，通过换算我们可以知道，1em = 0.625 * 16 * 1 = 10px。有了这个换算公式就可以把原本的px换算成em单位。

 注解：

  可能大家细心点会发现，上面例子换算之后，在控制台的解析中显示的却是12px。这是因为chrome中文版默认最小字体为12px，是临界线，只要解析中是小于12px的，都会默认为12px，超过12px则不会有这问题。

 em的特点

• 通过上面的举例，我们可以了解到em有两个特点。
  • 一、em是相对于父级元素的单位，会随父级元素的属性（font-size或其它属性）变化而变化。
  • 二、em的值并不是固定的。

 写CSS样式时要注意的点

• 根元素或body选择器中要声明font-size：0.625。
• px写成em单位，只要把原来的px除以10。
• 要避免字体大小的重复声明。

 em的缺点

• em是相对于父级元素的字体大小变化而变化的，当父级元素字体大小发生改变，你又得去重新计算一遍。

rem单位

  rem是css3中新增的一个相对长度单位，它的出现是为了解决em的缺点。因为，rem只相对于html元素，只要在html标签上设置了字体大小，那么html里头所有的字体大小都会以此为参照的标准，一般用于前端自适应布局。