CSS中为何使用(min--moz-device-pixel-ratio:0)查询匹配Mozilla浏览器？

当初为什么要使用这个媒体查询？ #

这是2010-2017年前后前端圈广泛使用的Firefox专属CSS hack，核心作用就是不用加额外类名、不用跑JS判断，直接在CSS里写仅对火狐浏览器生效的样式规则，用来修复当时火狐和其他内核浏览器在布局、默认样式上的渲染差异。
把值设为0是故意的：所有显示设备的物理像素和CSS像素的比值最小为1（普通非高清屏），所以min-*:0是恒成立的判断，只要浏览器能识别这个媒体特性，里面的规则就一定会生效，相当于一个火狐专属的样式开关。

和其他同类设备像素比查询的区别 #

常见的设备像素比类媒体查询分三类，区别非常明确：

• 标准写法：@media (min-resolution: 1dppx)，是W3C规范定义的标准语法，所有现代浏览器都能识别，用来判断高清/普通屏，不存在浏览器专属匹配效果
• Webkit系专属旧写法：@media (-webkit-min-device-pixel-ratio: 1)，是早年Chrome、Safari等Webkit内核浏览器用的带前缀实验性写法，现在基本已经被标准resolution查询替代
• 本次提到的(min--moz-device-pixel-ratio:0)：既不是标准语法，也不是火狐官方公布的正规带前缀写法，本质是钻浏览器解析规则空子做的嗅探hack，从设计之初就不是为了判断屏幕像素比存在的，只是借了设备像素比这个媒体特性的壳实现火狐专属匹配。

为什么它能只匹配Mozilla系浏览器？ #

核心是利用了老版本火狐CSS解析器的容错逻辑，以及其他浏览器的严格语法校验规则：

1. 火狐官方正规的带前缀设备像素比查询，正确写法应该是@media (-moz-min-device-pixel-ratio: 0)，也就是厂商前缀-moz-放在媒体特性最前面。而hack写法故意把前缀位置写错，拼成min--moz-device-pixel-ratio——老版本火狐的解析器在处理带min/max的范围类媒体特性时，会自动校正前缀位置，把这个写错的特性名识别成自己支持的-moz-min-device-pixel-ratio，从而判定查询成立。
2. 其他内核浏览器（Chrome、Safari、IE、旧版Edge）的CSS解析器遵循严格语法规则，认为以两个短横开头的标识符是CSS自定义属性（也就是CSS变量），不属于合法的媒体特性名，会直接判定整个媒体查询无效，完全不加载里面的样式规则，不会出现误匹配。

现在的替代方案 #

这个hack在2017年火狐发布Quantum内核（Firefox 57+）之后就已经彻底失效了——新版火狐修复了这个解析容错逻辑，现在碰到这个写法会和其他浏览器一样直接判定为无效，没有任何适配价值。
目前如果需要写仅对火狐生效的样式，推荐用稳定的标准特性查询方案：

/* 所有火狐版本都能识别，其他现代浏览器不会命中 */
@supports (-moz-appearance: none) {
  /* 这里放火狐专属样式 */
}

如果你的需求本身是判断设备像素比做高清屏适配，直接用标准语法就行，不需要任何hack或者前缀：

@media (min-resolution: 2dppx) {
  /* 2倍屏及以上的通用样式，所有现代浏览器兼容 */
}

额外提醒：不要用UA嗅探的方式做浏览器适配，UA字符串可以被用户随意修改，而且现在很多浏览器会伪装成其他内核的UA，判断结果非常不可靠。

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