代码天地

今天的学习到的-webkit-min-device-pixel-ratio来记住一下！！

我们先想一下：

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

因为的正常的屏幕是的 1个像素，而高清屏幕是 4像素的点！

解决方案：

把之前的原图放大 ” 2 ” 倍的；

用的css处理之前的图的：

代码如下的：

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {}

这里：

-webkit-min-device-pixel-ratio: 1.5

是指当时显示屏最小的色倍为1.5倍的

来科普一下device-pixel-ratio的知识点：

它是设备上物理像素和设备独立像素( device-independent pixels (dips) )的比例，即 devicePixelRatio = 屏幕物理像素/设备独立像素

例如iPhone4S，分辨率为：960×640，取屏幕宽度计算，物理像素640px，设备独立像素320px，那么，devicePixelRatio 值为 640px / 320px = 2，又如iPhone3，计算出来的 devicePixelRatio 值为 320px / 320px = 1

无视网膜设备devicePixelRatio值为1，视网膜设备为2

我们主要通过：通过判断 devicePixelRatio 的值来加载不同尺寸的图片

针对普通显示屏(devicePixelRatio = 1.0、1.3)，加载一张 1 倍的图片

针对高清显示屏(devicePixelRatio >= 1.5、2.0、3.0)，加载一张 2 倍大的图片

这里可以通过查询其他的设备的像素比：http://screensiz.es/phone