为啥移动端需要@2x或者@3x的图片

Posted 2023-03-23

参考技术A

上篇文章 讲到了我对设备像素比的理解，但在写文章的过程中，也一直有一个疑惑的地方：为什么在 Retina 屏下需要使用 @2x（两倍）甚至是 @3x（三倍）的图片呢？这样的用法跟设备像素比之间有什么关系呢？
为了明白这个问题，也看了一些文章，本文就是我对这个知识点的一些总结。

前面我们介绍了设备物理像素和 CSS 像素，这两个像素一个是实体的，一个是抽象的单位。关于图片，还有一个像素需要我们引起注意：位图像素。
一般我们在页面上使用的图片都是位图，位图的最小单位也是像素，叫做位图像素。位图像素是图片本身的特性，在图片产出时就已经确定了，和 CSS 像素以及设备物理像素没有任何关系。
位图像素是位图最小的单位，其不可以再被拆分。

以 IPhone6 为例，IPhone6 手机的尺寸为 375px * 667px，如果我们在 PC（非 Retina 屏）上制作出一个宽度为 375px 的图片，该图片在电脑上显示正常，但在手机上显示就模糊了。这是为什么呢？不是分辨率越高，图片显示越清晰吗，为什么图片反而变得模糊了呢？
这个问题需要从以下几个方面来解释：

前面的文章提到过：设备像素比的意义在于规定设备以多少个物理像素来显示 1px 的 CSS 像素也是如此。
此外，该结论对于位图一样适用：设备像素比规定了设备以多少个物理像素来显示 1px 的位图像素。
举个例子，一张 375px * 200px 的位图，其拥有 375 * 200 = 75000 个位图像素，如果我们在 PC（设备像素比为1） 上看这张图片，将会以 375 * 200 = 75000 个物理像素来显示，因此在 PC 上图片的清晰度不变。如果我们在 IPhone6 上预览这张图片，将会以 375 * 200 *4 = 300000 个物理像素来显示这张图片。
当我们在 IPhone6 上预览图片时，其用来显示图片的物理像素个数为图片像素的 4 倍（300000 个物理像素），而图片实际上只有 75000 个有效像素，我们知道像素是最基本的单位，无法再进行拆分，因此剩下的 300000 - 75000 = 225000 个物理像素将采用填充的方法来显示图片。
所谓填充，就是就近取色，这也是造成图片模糊的原因。下面这张图片解释的十分形象：

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

前面讲到了图片在移动设备上预览时变得模糊是因为图片的位图像素总数小于物理像素的总数，而设备采用填充算法进行填充的原因。如果位图像素的数目大于物理像素，又是怎样的情况呢？
举个例子，我们将一张 750px * 400px 的图片在 PC（设备像素比为1）上设置为 375px * 200px 显示，由于位图的像素数目大于物理像素的数目，这样一来即使使用全部的物理像素也无法完整显示这张图片，因此浏览器也会经过一定的算法，将图片进行压缩，使得压缩后图片的位图像素等于物理像素。
对于这个过程，下面这张图片解释的十分形象：

我们已经知道，不管是图片的位图像素数目大于物理像素，还是图片的位图像素数目小于物理像素都会造成显示上的差异，要么是图片变模糊了，要么是色差和锐利度减少了。因此，要想完美的适配多种设备，就需要 针对不同设备采用相应的图片，使得图片的位图像素数目等于物理像素。
通常情况下，设备像素比为 1 的设备上使用 @1x 的图片，在设备像素比为 2 的设备上采用 @2x 的图片，在设备像素比为 3 的设备上采用 @3x 的图片。如果对于移动端适配要求完美，就采用上述的方案，如果要求一般，提供 @1x 和 @2x 的图片也是可以的。要求再低一点，可以统一使用 @2x 的图片，这样对于低分屏会增加一些流量消耗，但是显示效果也是不错的。

本文解答了为什么在高清屏下需要使用 @2x 或者 @3x 的图片，这是由于位图的像素数目小于物理像素数目的原因，对应的，在后面也分析了位图像素数目大于物理像素数目的情况。

附：参考资料
移动端高清、多屏适配方案
使用Flexible实现手淘H5页面的终端适配

完。

移动端雪碧图sprite的实现

移动端适配的时候，通常是用rem作为长宽单位，因此，在不同的设备下，元素的实际宽高（px）是不一样的，如果是单张图片作为为背景图片的时候，最为方便，只要设置背景图片的属性background-size:contain|conver|100%;都能够将图片盖住整个div。

其次如果用雪碧图的话，那么得将 背景图片的大小和位置改为rem单位。background-position：x.x rem  y.y rem;background-size : xxrem yyrem;此处就是将按照设计稿的px来转换为rem。原理就是背景图片的大小，还有显示的背景图片位置都用rem来相对变化，就能够正确的显示对应的icon。