1x，2x，3x切图是如何适配的

作为设计师和前端开发人员，默认在将设计稿交付开发时，需提供多倍率的切图，那究竟为什么需要多倍率切图呢？今天我终于搞清楚啦～

Q:什么是切图？

A:切图是设计稿中无法用代码实现的，比如图标、广告图，需要提供图片给开发人员。

Q:屏幕尺寸、物理分辨率、像素密度分别是什么？

A:要了解切图适配，首先需要知道3个概念。

（1）屏幕尺寸：屏幕对角线长度

（2）分辨率：屏幕像素点总数，即横向的像素点数*竖向的像素点数

（3）像素密度（PPI）：每英寸的像素点数，因此PPI数值越高，越能体现出图的细节

Q:逻辑分辨率是什么？如果没有逻辑分辨率会怎样？

A:如图2，屏幕尺寸一致，像素密度相差1倍。

相同的图片占据屏幕的像素点数量一致，所以在右侧屏幕的显示面积仅占1/4。

屏幕尺寸和分辨率是固定的，因此要让同一个软件在多设备上显示正常，需要将屏幕的物理分辨率进行转换，不管实际有多少像素点，系统只认准一个分辨率，也就是逻辑分辨率。

Q:不同倍率的切图如何适配设备？

A:逻辑分辨率是系统设定的，用物理分辨率/逻辑分辨率得到倍率的转换值，从而得到缩放因子，再根据缩放因子决定该设备使用的切图。

Q:用错切图会导致什么问题？

A:我们以极小的圆形切图做一个示例。

在高分辨率的设备上使用@1x切图，看到切图明显有锯齿感，严重了会影响切图形状的识别。

在低分辨率的设备上使用@3x切图，调整切图的尺寸后视觉上与原本切图效果基本一致。

因此会有比较偷懒的做法是直接使用@3x切图，在代码中设置切图的大小，基本不会影响显示的效果。但是这涉及到图片资源的加载和换算，对页面的加载速率有所影响，所以实际开发中还是应该提供不同倍率的切图，根据设备进行适配。

希望对您有所帮助！