css3的 -webkit-min-device-pixel-ratio属性 解决高清的适配

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

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

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

解决方案：
把之前的原图放大 ” 2 ” 倍的；
用的css处理之前的图的：
代码如下的：

这里：

-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

就科普到这里！！！

现在我们来怎么缩小的原来的图，就想放大就要缩小回去的；
代码图如下：

就可以还原的！今天就说到这里的拜拜！！