页面布局的单位们（px,em,rem,dpr）
2016-06-05 本文已影响538人
进击的前端
看到有人的代码里用rem，然后就很好奇。
px 前端最基础的单位是像素，它比较能够理解，是代码最小的分辨率单位。
em 是定义字体大小的，浏览器默认1em=16px，当然你可以自定义。然后你就可以单位换算了，比如1.4em = 16 * 1.4px，em的换算比是父亲节点的换算比。
rem 继承根元素<html>的换算比，这样比em稳定
16px的换算表
emTable.png
支持的浏览器：
Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+
关于dpr，移动端的布局很多涉及到了dpr，这里涉及到了像素密度的问题，主要针对移动端吧。
dpr的的全称是device pixel ratio = physical pixel/density-independent pixel
在javascript中，可以通过window.devicePixelRatio获取到当前设备的dpr
device-width
表示手机的分辨率宽度，而并非手机物理像素宽度。iPhone4在垂直状态下物理像素宽度为640，这里的device-width
代表的则应该是它的dip像素320px。
参考资料：
[1]CSS3的REM设置字体大小
[2]How to size text using ems
[3]移动端H5页面高清多屏适配方案
