为什么在移动端使用@2x、@3x的图片?

在现在的移动设备中，有很多高像素的设备，为了能显示更高的像素密度，UI设计师一般会提供多个版本的图像资源。这些不同的图片资源通常标记为：@1x,@2x,@3x

@1x像素是我们的标准像素，@2x像素是标准图像尺寸的两倍，适用于中等图像设备device-pixel-ratio为2的设备，@3x像素是标准图像的三倍，适用于高等图像设备device-pixel-ratio为3的设备。

如果都用一样的标准像素来显示图片，不能让不同分辨率的设备发挥性能极致。而且还会影响用户对整体网站的体验。我们可以这样想既然我花钱买了高分辨率的手机设备，为什么和其他低分辨率的图像显示细腻度一样，这显然不符合这种人群的定位。

我们可以使用以下CSS的媒体查询media属性来设置不同大小的图片：

.box {
    width:132px;
    height: 17lpx;
    background-color:red;
    background-image:url(./img/zznh.png);
    background-size: cover;
}

@media only screen and(-webkit-min-device-pixel-ratio: 2),
    only screen and (min--moz-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2),
    only screen and (min-device-pixel-ratio:2) {
    .box{
        background-image:url('./img/zznh@2x.png');
    }
}
// 针对3x屏幕
@media only screen and(-webkit-min-device-pixel-ratio: 3),
    only screen and (min--moz-device-pixel-ratio: 3),
    only screen and (-o-min-device-pixel-ratio: 3),
    only screen and (min-device-pixel-ratio:3) {
    .box{
        background-image:url('./img/zznh@3x.png');
    }
}

但是我们通过查询MDN文档得知-webkit-min-device-pixel-radio是一个非标准的特性，也就是说并不能在生成环境中使用它。

那我们应该使用什么来设置图片呢？

resolution媒体特性

resolution媒体特性是CSS标准中用于查询设备显示密度的推荐方式。它支持多种单位,包括 dpi(dots per inch,每英寸点数)、dpcm (dots per centimeter,每厘米点数)、和dppx (dots per pixel unit,每像素点数单位，相当于设备像素比)。

我们使用ddpx即可:1dppx相当于一个设备独立像素对应于一个屏幕物理像素。那么我们如何在代码中使用呢？

//针对2x屏幕
@media only screen and (min-resolution: 2dppx) {
    .box{
        background-image: url('./img/zznh@2x.png');
    }
}
//针对3x屏幕
@media only screen and (min-resolution: 3dppx) {
    .box{
        background-image: url('./img/zznh@3x.png');
    }
}

感谢大家观看