visualdraft在前端开发之前，visualMM会给我们一个psd文件，叫做visualdraft。对于移动端开发，为了达到高清的页面效果，视觉稿的规格往往遵循以下两点：一是选择手机屏幕的宽高作为基准（之前是320×480iphone4，现在更多的是iphone6的375×667）。对于retina屏幕（如：dpr=2），为了达到高清效果，mockup的canvassize会是reference的两倍，也就是说像素数会是原来的四倍（iphone6：原来的375×667变成750×1334）。问题：对于dpr=2的手机，canvassize×2为什么可以解决高清问题？对于2倍尺寸的视觉稿，在具体的css编码（即布局问题）中如何还原每块的真实宽高？带着问题往下看……在具体分析一些概念之前，我们首先要知道以下几个关键的基本概念（术语）。物理像素（physicalpixel）物理像素是显示器（手机屏幕）上最小的物理显示单位。在操作系统的调度下，每个设备像素都有自己的颜色值和亮度值。Device-independentpixel（密度无关像素）device-independentpixel（也叫密度无关像素），可以认为是计算机坐标系中的一个点，这个点代表一个虚拟像素（如：css像素），它可以由程序使用，然后由相关系统转换为物理像素。因此，物理像素和设备独立像素之间存在一定的对应关系，这就是接下来要讨论的设备像素比。设备像素比（简称dpr）定义了物理像素和设备独立像素的对应关系，其值可以根据以下公式得到：设备像素比=物理像素/设备独立像素//在某个方向上，在x方向或javascript中的y方向，当前设备的dpr可以通过window.devicePixelRatio获取。在css中可以通过-webkit-device-pixel-ratio、-webkit-min-device-pixel-ratio和-webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备做一些样式适配配置（这里只针对带有webkit内核的浏览器和webviews）。基于以上概念，我们来举例说明：以iphone6为例：设备的宽高为375×667，可以理解为设备的独立像素（或css像素）。dpr为2，根据上面的计算公式，它的物理像素应该是×2，也就是750×1334。用一张图来表达，就是这样（盗图）：从上图可以看出，对于这样一个css样式：width:2px;高度：2px；在不同的屏幕上（normalscreenvsretinascreen），csspixels显示的尺寸（物理尺寸）是一致的，不同的是1个csspixel对应的物理像素个数不一致。在普通屏幕上，1个css像素对应1个物理像素(1:1)。在视网膜屏幕下，1个css像素对应4个物理像素（1:4）。参考http://www.html-js.com/article...
