resolution 表示设备的像素密度，或者叫屏幕密度 下面我们可以使用 resolution 这个媒体特性去设置一些媒体查询 …

@media screen and (max-resolution: 150dpi){
body{
background:#c0392b;
}
}

这条媒体查询的意思就是，如果输出的设备媒体类型是 screen … 并且设备的像素密度小于等于 150dpi 的时候… 那么就会应用在大括号里的样式 … 也就是背景会变成一种红色 … 保存 …

我们可以打开 firefox 浏览器去试一下 …

因为我的电脑屏幕像素密度是 110 dpi ，小于媒体查询里设置的 150dpi ，并且输出的设置的类型是 Screen … 所以会触发媒体查询的样式 …

再打开 chrome 浏览器试一下 … 同样的输出设备，在 chrome 浏览器上并不能触发应用 resolution 媒体查询的样式 …

这是因为 webkit 核心的浏览器对 resolution 媒体查询支持的不是太好，像 chrome 浏览器，或者 safari 浏览器都是用的 webkit 核心…

所以它们都不认识 resolution 这个媒体特性 …

我们可以使用 device-pixel-ratio 来代替标准的 resolution …

这个 device-pixel-ratio 是设备的像素比例 … 其实就是我们在上一个视频里提到的，像素的放大的倍数 … 在苹果的设备上，一般的屏幕的 device-pixel-ratio 都是 1 ，视网膜屏幕的 device-pixel-ratio 是 2 …

我们可以这样来修改一下这条媒体查询

-webkit-device-pixel-ratio: 1

这里，我们使用了一个 webkit 前缀 … 意思就是，这条媒体查询是专门针对 webkit 核心的浏览器设计的 … 其它的浏览器，比如 IE ，Firefox … 它们都不会应用带 webkit 前缀的媒体查询 ….

webkit 前缀的后面再加上 device-pixel-ratio … 这里我们把值设置成了 1 …

保存 … 打开 chrome 浏览器 … 刷新 … 你会发现 .. 会触发应用媒体查询里的样式 .. 背景会变成红色 … 因为当前我用的电脑屏幕的这个 device-pixel-ratio 是 1 …

iOS …

我们再切换到 iOS 设备上看一下 … 这个模拟器现在用的设备是普通屏幕的 iPhone … 所以它的 device-pixel-ratio 也是 1 … 这样也就会应用在媒体查询里设置的样式 …

我们把设备再换成 retina 屏幕 iPhone …

现在，页面上就不会应用媒体查询里的样式了 … 因为当前设备的 device-pixel-ratio 是 2 …

标准

我们使用 device-pixel-ratio 为 webkit 核心的浏览器，去设置，屏幕密度的媒体查询 … 对于其它核心的浏览器，我们可以继续使用标准的 resolution 这个媒体特性 ….

为了让它跟 device-pixel-ratio 有一样的效果 … 我们可以使用 dppx 这个单位 … dppx 是 dots per px 的缩写 … 表示每个像素上的点数 … 它的值也就是像素的放大倍数 …

在这条媒体查询的后面用逗号连接媒体查询列表 … 然后设置标准的 resolution 媒体查询 …

@media screen and (-webkit-device-pixel-ratio: 1), screen and (resolution:1dppx){
body{
background:#c0392b;
}
}

总结

在使用 resolution 设置媒体查询的时候，我们最好还是使用 dppx 这个单位， 这样更容易一些 …