CSS 中 px、rem 与 em

em整理：

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么 12px=0.75em,10px=0.625em。为了简化 font-size 的换算，需要在 css 中的 body 选择器中声明Font-size=62.5%，这就使 em 值变为 16px*62.5%=10px, 这样 12px=1.2em, 10px=1em, 也就是说只需要将你的原来的 px 数值除以10，然后换上 em 作为单位就行了。
所以我们在写 CSS 的时候，需要注意几点：
body 选择器中声明 Font-size=62.5%；
将你的原来的 px 数值除以 10，然后换上 em 作为单位；
重新计算那些被放大的字体的 em 数值。避免字体大小的重复声明。<br>
也就是避免 1.2 * 1.2= 1.44 的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是 1.2em, 因为此 em 非彼 em，它因继承#content的字体高而变为了 1em=12px。

why:

em 单位取决于一个font-size值而非 html 元素的字体大小。<br>为此，em 单位的主要目的应该是允许保持在一个特定的设计元素范围内的可扩展性<br>例如，您可能使用 em 值设置导航菜单项的 padding、 margin，line-height 等值。带有 0.9rem 字体大小的菜单<br>通过这种方式，如果您更改菜单的字体大小菜单项周围的间距将在剩余的空间按比例缩放

 

Rem整理：

根 html 元素将继承浏览器中设置的字体大小，除非显式设置固定值去覆盖。所以 html 元素的字体大小虽然是<br><br>直接确定 rem 值，但字体大小可能首先来自浏览器设置。因此浏览器的字体大小设置可以影响每个使用 rem<br><br> 单元以及每个通过 em 单位继承的值。

Rem 单位提供最伟大的力量并不仅仅是他们提供一致尺寸而不是继承。 相反，它给我们的一个途经去获取用<br><br>户的偏好来影响网站中每一处使用rem的元素大小，不再是使用固定的 px 单位。为此，使用 rem 单位的主要<br><br>目的应该是确保无论用户如何设置自己的浏览器，我们的布局都能调整到合适大小

1.rem 与 em:
rem 单位翻译为像素值是由 html 元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。<br>em 单位转为像素值，取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位。
2.px 与 rem:
对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。<br>对于需要适配各种移动设备，使用rem，例如只需要适配 iPhone 和 iPad 等分辨率差别比较挺大的设备。
3.综述:
rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
em 单位基于使用他们的元素的字体大小。
rem 单位基于 html 元素的字体大小。
em 单位可能受任何继承的父元素字体大小影响
rem 单位可以从浏览器字体设置中继承字体大小。
使用 em 单位应根据组件的字体大小而不是根元素的字体大小。
在不需要使用em单位，并且需要根据浏览器的字体大小设置缩放的情况下使用rem。
使用rem单位，除非你确定你需要 em 单位，包括对字体大小。
媒体查询中使用 rem 单位
不要在多列布局中使用 em 或 rem 改用 %。
不要使用 em 或 rem，如果缩放会不可避免地导致要打破布局元素。