咨询-webkit-min-device-pixel-ratio:2相关CSS媒体查询代码的运行逻辑

先看你给出的完整代码：

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2){
  div{background-color: blue;}
}

运行机制 #

这是一段CSS媒体查询，核心是通过两个并列的“或”条件匹配设备特性，只要满足其中任意一个条件，大括号里的样式规则就会生效。

div背景变蓝的触发条件 #

当设备满足以下任一情况时，所有<div>元素的背景会变成蓝色：

• 设备是屏幕类型（而非打印机、屏幕阅读器等其他媒体），且使用WebKit内核的浏览器（比如早期Chrome、Safari、移动端多数浏览器）检测到设备像素比（DPR）≥2
• 设备是屏幕类型，且浏览器支持标准CSS语法，检测到设备像素比（DPR）≥2

补充说明 #

• device-pixel-ratio指设备物理像素与CSS逻辑像素的比值，DPR=2就是常说的Retina屏（1个CSS像素对应2×2个物理像素）
• 同时写私有前缀和标准属性，是为了兼容不同时期的浏览器——早期WebKit内核浏览器只认带-webkit-前缀的属性，现代浏览器则支持标准写法，这样能覆盖更多场景

内容的提问来源于stack exchange，提问作者Rober