面试题 -- CSS单位px、em 、rem的区别?

前言

px em rem 在 CSS 中，被定义为 长度单位，在设计页面时经常用到这些单位来规定某个元素的尺寸，但是它们同为单位，却有着很大的区别。

PX

px 像素(Pixel)： 相对长度单位，相对于 显示器屏幕分辨率 而言的。 (opens new window)

任意浏览器的默认字体高都是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作为单位就行了。

特点

1. IE无法调整那些使用 px 作为单位的字体大小
2. 国外的大部分网站能够调整的原因在于其使用了 em 或 rem 作为字体单位
3. Firefox能够调整 px 和 em，rem，但是96%以上的中国网民使用IE浏览器(或内核)

EM

em： 相对长度单位，相对于 当前对象内文本 的字体尺寸 (opens new window)；如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

任意浏览器的默认字体高都是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作为单位就行了。

特点

1. em 的值并不是固定的
2. em 会继承父级元素的字体大小

REM CSS3

rem(root em)即 根em： 相对长度单位, 相对于 HTML根元素 的字体尺寸；

特点

1. rem 既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应
2. rem 除了IE8及更早版本外，所有浏览器均已支持

PX 与 REM 如何选择？

1. 对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用 px 即可。
2. 对于需要适配各种移动设备，使用 rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备