移动端开发为什么使用@2x@3x图片

物理、逻辑与位图像素的概念

关于设备物理像素和逻辑像素，这两个像素一个是实体的，一个是抽象的单位。除此之外还有一个不可忽视的像素，就是位图像素。

• 物理像素（设备像素）：指的是设备屏幕实际拥有的像素点。一个设备生产出来，它的像素就已经确定了，iphone6的分辨率是375px * 667px。

• 逻辑像素（CSS像素）：是我们进行CSS样式设计时的一种抽象单位，它可以自动在不同设备之间调节。

  设备像素比 = 设备的物理像素 / CSS像素

  如果设备像素比为2，就意味着设置的 1px CSS 像素，在设备上实际使用了2个物理像素单元来进行渲染，所以实际看到的一定会比 1px 粗一些。

• 位图像素：一般我们在页面上使用的图片都是位图，位图像素是位图最小单位，不可再拆分。位图像素是图片本身的特性，在图片产出时就已经确定了，和 CSS 像素以及设备像素没有任何关系。

问题：图片在Retina下却变模糊

以 IPhone6 为例，IPhone6 手机的尺寸为 375px * 667px，如果我们在 PC（非 Retina 屏）上制作出一个宽度为 375px 的图片，该图片在电脑上显示正常，但在手机上显示就模糊了。

分辨率越高，图片显示不应该越清晰吗，为什么图片反而变得模糊了呢？ 这个问题需要从以下几个方面来解释：

• 像素是显示的最小单位，不可拆分；

• 由于设备像素比的原因，CSS 的 1px 或位图的 1px 不一定等于物理像素的 1px。

前面我们提到过：设备像素比的意义在于规定设备以多少个物理像素来显示 1px 的 CSS 像素。该结论对于位图一样适用：设备与位图的像素比规定了设备以多少个物理像素来显示 1px 的位图像素。

举个例子：

　　如果我们在设备1上看这张图片，将会以 375 * 200 = 75000 个物理像素来显示，因此图片的清晰度不变。但如果我们在设备2上预览这张图片，将会以 375 * 200 *4 = 300000 个物理像素来显示这张图片。其用来显示图片的物理像素个数为图片像素的 4 倍，而图片实际上只有 75000 个有效像素。

　　因为像素是最基本的单位，无法再进行拆分，所以剩下的 300000 - 75000 = 225000 个物理像素将采用填充的方法来显示图片。所谓填充，就是就近取色，这也是造成图片模糊的原因。

解决方案：使位图像素和设备像素的数目接近

现在我们就能来回答，为什么在移动设备开发者经常使用到@2x、@3x的图片了。

　　前面已经知道，造成图片模糊的原因是位图的像素总数和对应的物理像素个数不一致，那么只需要增加图片的位图像素数目，使其接近于设备物理像素就解决了这个问题。 因此，要想完美的适配多种设备，就需要针对不同设备采用 @2x 或者 @3x 的图片，使图片的位图像素和设备位图像素的数目接近于 1:1，就能使图片清晰显示不模糊。