移动端物理/css/位图像素概念以及rem布局的实现

这方面的知识一直一知半解。从前看过一些文章，也没有豁然开朗的感觉。今天看了这篇http://div.io/topic/1092感觉明白了一些，不论是否正确，先做记录，留待日后验证。

1. 物理像素、CSS像素与位图像素

物理像素是设备本身用于渲染画面的最小显示单元。我们平时买手机，比如iphone6或者华为看到的720 * 1080, 1080 * 1920其实都是物理像素。显然物理像素不等于PC前端开发所理解的屏幕宽度。

CSS像素是编程时使用的虚拟像素。我的理解是CSS像素是以屏幕宽度为基准的。

如果视觉设计师以720画布来设计，那么设计稿中所有的尺寸基于物理像素，也就是说应该与物理像素成正比。前端编写CSS代码时，CSS代码的值应该以屏幕尺寸为基准等比设置。对于原生dpr是2的屏幕，1css像素点要用4物理像素点来表示。retina屏下1px的边框，

其实设计师的初衷是1物理像素。可想而知对于程序员来说，应该要在css中实现0.5 CSS像素的边框，这就是为什么设计师总觉得dpr=2的屏幕上1px的线很粗。

在淘宝的flexible解决方案中，设置data-dpr属性以控制屏幕的缩放比例。实际上data-dpr的设置不会影响真实的window.devicePixelRatio的值。

位图像素是处理高清图片时用到的概念。当1物理像素可以表示1位图像素时，图片清晰。我们平时所说的x2倍的图，是基于css像素的。所以基于css像素长宽都放大两倍的图，在retina下面转换成物理像素就相当于1位图像素对应1物理像素，就会清晰。

2. rem布局

rem布局的方式是设置html font-size。基准值计算：document.documentElement.clientWidth * dpr / 10. 编写pxToRem函数。

布局的原则是：视觉稿尺寸/物理像素 = css像素值 / 屏幕宽度。 所以css像素值 = 视觉尺寸 / 真实dpr.