一、移动端一些概念

在前端开发之前，视觉 MM 会给我们一个psd文件，称之为视觉稿。

对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：

1）首先，选取一款手机的屏幕宽高作为基准(以前是 iPhone4 的 320×480，现在更多的是 iphone6的 375×667)。

2）对于 retina 屏幕(如: dpr=2)，为了达到高清效果，视觉稿的画布大小会是基准的 2 倍，也就是说像素点个数是原来的 4 倍（对 iphone6 而言：原先的 375×667，就会变成 750×1334）。

问题：

对于 dpr=2 的手机，为什么画布大小×2，就可以解决高清问题？

对于 2 倍大小的视觉稿，在具体的 css 编码中如何还原每一个区块的真实宽高(也就是布局问题)?

物理像素(physical pixel)

一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。

设备独立像素(density-independent pixel)

设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css 像素)，然后由相关系统转换为物理像素。

设备像素比(device pixel ratio)

设备像素比(简称 dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到： 设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x 方向或者 y 方向。

在 Javascript 中，可以通过 window.devicePixelRatio 获取到当前设备的 dpr。

在 css 中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio 进行媒体查询，对不同 dpr 的设备，做一些样式适配(这里只针对 webkit 内核的浏览器和 webview)。

retina 屏幕下，1 个 css 像素对应 4 个物理像素(1:4)。

例：width: 2px;height: 2px; 如下

一个位图像素是栅格图像(如：png, jpg, gif 等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如：显示位置，颜色值，透明度等)。

retina 下图片的展示情况？

理论上，1 个位图像素对应于 1 个物理像素，图片才能得到完美清晰的展示。

在普通屏幕下是没有问题的，但是在 retina 屏幕下就会出现位图像素点不够，从而导致图片模糊的情况。

如上图：对于 dpr=2 的 retina 屏幕而言，1 个位图像素对应于 4 个物理像素，

由于单个位图像素不可以再进一步分割，所以只能就近取色，从而导致图片模糊(注意上述的几个颜色值)。

所以，对于图片高清问题，比较好的方案就是两倍图片(@2x)。如：200×300(css pixel)img 标签，就需要提供 400×600 的图片。

如此一来，位图像素点个数就是原来的 4 倍，在 retina 屏幕下，位图像素点个数就可以跟物理像素点个数形成 1 : 1 的比例，图片自然就清晰了(这也解释了之前留下的一个问题，为啥视觉稿的画布大小要×2？)。

这里就还有另一个问题，如果普通屏幕下，也用了两倍图片，会怎样呢？

很明显，在普通屏幕下，200×300(css pixel)img 标签，所对应的物理像素个数就是 200×300 个，而两倍图片的位图像素个数则是 200×300*4，所以就出现一个物理像素点对应 4 个位图像素点，

所以它的取色也只能通过一定的算法(显示结果就是一张只有原图像素总数四分之一，我们称这个过程叫做 downsampling)，肉眼看上去虽然图片不会模糊，但是会觉得图片缺少一些锐利度，或者是有点色差(但还是可以接受的)。

所以最好的解决办法是：不同的 dpr 下，加载不同的尺寸的图片。

不管是通过 css 媒体查询，还是通过 javascript 条件判断都是可以的。那么问题来了，这样的话，不就是要准备两套图片了嘛？(@1x 和@2x)

我想，做的好的公司，都会有这么一个图片服务器，通过 url 获取参数，然后可以控制图片质量，也可以将图片裁剪成不同的尺寸。

所以我们只需上传大图(@2x)，其余小图都交给图片服务器处理，我们只要负责拼接 url 即可。

Retina 下，border: 1px 问题