介绍
关于设备像素比的知识，想必大家开发过移动端的都有所了解。如有不懂请参考设备像素比devicePixelRatio简单介绍;
问题
一般普通图在的1920*1080，是很正常的，但是如果放在的2k或者4K屏幕里面，背景图就是模糊掉，为什么呢？
在不同的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈现的大小(物理尺寸)是一致的，不同的是1个css像素所对应的物理像素个数是不一致的。
在普通屏幕下，1个css像素 对应 1个物理像素(1:1)。
在retina 屏幕下，1个css像素对应 4个物理像素(1:4)。
解决方法
//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");
}
检测手机是几倍屏
alert(window.devicePixelRatio);
