自动适配 2x、3x 背景图

基本概念

• DPI: dots per inch, 表示一英寸多少个像素点, 我一般称作像素密度，简称密度
• 分辨率: 横纵2个方向的像素点的数量

这个世界上存在着很多不同屏幕密度的手机，屏幕密度是什么？就是dpi，就是单位长度里的像素数量, 想象一下如果这些手机的尺寸一样, 屏幕密度相差很大, 那么是不是说一个手机水平方向上像素很少，另一个手机水平方向上像素很多？

所以经常会发生这种情况: 同样一张背景图, 分别在设备尺寸一样的安卓设备和ios设备中表现不一致，一个稍微模糊，一个比较清晰，大小都一样, 这就是因为DPI不一样, 也就是渲染图片的像素点不一样所导致。

兼容思路

基于这种情况, 就出现了 2倍、3倍 尺寸图的概念, 简单来说, 我们在 1倍DPI, 2倍DPI 的屏幕设备上，使用 2倍尺寸的图片, 3倍 DPI 屏幕设备上使用 3倍尺寸的图片, 使图片始终保持高清, 通常 2倍尺寸的图片和3倍尺寸的图片被称为 2x 图 3x 图

为什么1倍DPI也使用2x图片？

因为图片缩小不会模糊

既然缩小不会模糊，那为什么不全部使用3x图片？

为了提高性能, 如果图片全部使用3x图, 提高了手机流量的消耗, 而且页面加载速度也会大打折扣

实现方法

• 首先保证两套图片命名是由 @2x.png、 @3x.png结尾, 同一张图, 两套命名一致, 后缀除外, 如下图:

• 使用 less 写一个通用的函数, 通过 媒体查询 选择对应的图片

.bg-image(@picname) {
  background-image: url("../images/@{picname}@2x.png");
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
    background-image: url("../images/@{picname}@3x.png");
  }
}

• 使用时调用该函数

.test {
    .bg-image('clied');
  }

• 效果图

2倍密度的手机, 应用2倍的图片

切换3倍密度的手机, 自动更换成3倍图片

压缩图片（彩蛋）

稍大些的图片通常都需要通过无损压缩来提高性能体验; 压缩图片的工具有很多, 但是多多少少都会有些缺陷, 推荐一个网站线上压缩: https://tinypng.com