像素密度的 CSS 媒体查询：-moz-min-device-pixel-ratio vs. min--moz-device-pixel-ratio答案

【问题标题】：CSS media queries for pixel density: -moz-min-device-pixel-ratio vs. min--moz-device-pixel-ratio像素密度的 CSS 媒体查询：-moz-min-device-pixel-ratio vs. min--moz-device-pixel-ratio
【发布时间】：2012-07-10 15:01:34
【问题描述】：

在对设备像素密度使用 CSS 媒体查询时，我看到了 -moz-min-device-pixel-ratio 和 min--moz-device-pixel-ratio。

例如：

@media 
  only screen and (-moz-min-device-pixel-ratio: 1.5) {
  /* styles go here */
}

对比

@media 
  only screen and (min--moz-device-pixel-ratio: 1.5) {
  /* styles go here*/
}

哪个是正确的？

一些使用前者的教程/博客：

使用后者的一些教程/博客，包括 mozilla.org：

【问题讨论】：

哇，我不知道这个！我将更新我的网站以反映 Mozilla 的奇怪语法！

标签： mobile css media-queries

【解决方案1】：

第二个是正确的。

这是来自http://www.quirksmode.org/blog/archives/2012/07/vendor_prefixes.html

-webkit-min-device-pixel-ratio: 1.5
min--moz-device-pixel-ratio: 1.5
-o-min-device-pixel-ratio: 3/2

【讨论】：

【解决方案2】：

我是上面提到的威胁性云文章的作者。我的文章中列出的设备像素比是不正确的，因为它是很久以前写的（iPhone4 发布）。

已更新以引用正确的 Mozilla 语法。

我不知道 Mozilla 为什么选择使用 min--moz-device-pixel-ratio，但这似乎是官方选择的形式。

【讨论】：