前端中的@2x，@3x 图片

在美工提供给我们的切图中经常会看到一个图片有很多个尺寸，之前都是在网站中默认使用的1倍图，也就是默认尺寸的图片，其他的2倍图3倍图压根就没用过，今天又看到相关知识，深入探索了一把

2倍图，3倍图的概念应该是起源于移动端开发吧，尤其是ios系统，尺寸差别很大，以下资料可供参考：切图常说的@1X@2X@3X是什么意思？ - 知乎 (zhihu.com)

但是不仅限于iOS开发，其他平台和设备也需要使用二倍图和三倍图来适配不同的屏幕分辨率。虽然高分辨率屏幕在移动设备上更为普遍，但在其他设备上也存在高分辨率显示需求，例如Android手机、平板电脑、电视等。为了确保图像和界面元素在不同设备上的显示质量，开发者需要提供多个版本的图像资源。一倍图适用于低分辨率屏幕，二倍图适用于中等分辨率屏幕，而三倍图适用于高分辨率屏幕。通过提供适配不同分辨率的图像资源，可以使应用在各种设备上展示更加清晰和精细的效果

一般普通图在的1920*1080，是很正常的，但是如果放在的2k或者4K屏幕里面，背景图就是模糊掉，为什么呢？

在不同的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈现的大小(物理尺寸)是一致的，不同的是1个css像素所对应的物理像素个数是不一致的。
在普通屏幕下，1个css像素 对应 1个物理像素(1:1)。
在retina 屏幕下，1个css像素对应 4个物理像素(1:4)。

参考文章什么是三倍图？——移动端尺寸知识入门 - 知乎 (zhihu.com)
 

解决方法  

//css
.bg{
    background-image: url("@2x.png");//400*400
    width:200px;
    height:200px;
    background-size: 200px 200px
}
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
{
    .bg{
        background-image: url("@3x.png")//600*600
    }
}

//scss
@mixin bg-img($url) {
    background-image: url($url + "@2x.png");
    @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
        //测试 background:red 
        background-image: url($url + "@3x.png");
    }
}
//调用
.bg{
   @include bg-img("logo");
}

参考资料响应式图片 - 学习 Web 开发 | MDN (mozilla.org)

在HTML中使用时，可以这样写：

<img src="image.png" width="100" height="100" srcset="image@2x.png 2x, image@3x.png 3x">

上述涉及devicePixelRatio设备像素比，页面中的像素比可以在控制台打印查看

window.devicePixelRatio

 另有个疑问：vue动态图片中的srcset应该如何设置，有人知道吗？知道的评论区告知下，感谢