Question

我正在设置SCSS mixin以自动执行高清屏幕的媒体查询语法。我的SCSS是通过Codekit编译的，编译后应用AutoPrefixer。 mixin包含多个媒体查询，每个查询都针对不同的屏幕分辨率。我在每个媒体查询中使用的语法如下：

@media only screen and (-o-min-device-pixel-ratio: 4/5),
    only screen and (-webkit-min-device-pixel-ratio: 1.25),
    only screen and (min--moz-device-pixel-ratio: 1.25),
    only screen and (min-device-pixel-ratio: 1.25),
    only screen and (min-resolution: 1.25dppx),
    only screen and (min-resolution: 120dpi) {
        // my styles
    }

此语法重复多次，根据需要调整数字以定位不同的分辨率。它编译得很好，在AutoPrefixer工作之后，我还剩下以下编译输出：

@media only screen and (-webkit-min-device-pixel-ratio: 1.25), 
only screen and (min--moz-device-pixel-ratio: 1.25), 
only screen and (min-device-pixel-ratio: 1.25), 
only screen and (min-resolution: 1.25dppx), 
only screen and (min-resolution: 120dpi) {
      // my styles
      }

除了已删除的Opera前缀之外，

几乎与输入相同。大。除一例外。由于我无法理解的原因，当谈到我的x2比率代码块时，AutoPrefixer正在插入一个奇怪的额外线。这是我的编译输入之前是自动反映的：

@media only screen and (-o-min-device-pixel-ratio: 2 / 1), 
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min--moz-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2), 
only screen and (min-resolution: 2dppx), 
only screen and (min-resolution: 194dpi) {
  // my styles
}

这是AutoPrefixed输出：

@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min--moz-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2), 
only screen and (min-resolution: 2dppx), 
only screen and (-webkit-min-device-pixel-ratio: 2.0208333333333335), 
only screen and (min-resolution: 194dpi) {
  // my styles
}

您可以看到问题：AutoPrefixer添加了第二个-webkit-min-device-pixel-ratio条件，其奇怪值为2.0208333333333335。媒体查询已经具有-webkit-min-device-pixel-ratio条件，因此这个额外的条件与它直接冲突。奇怪的是它只能在x2查询上执行此操作。其他查询（所有这些查询都具有相同的复制和粘贴语法）不会得到这个奇怪的额外规则。

任何人都可以解释这个并告诉我如何避免它（除了不使用AutoPrefix）。

Answer 1

唉。这是飞行员错误。

我意识到“最小分辨率”的价值。条件应该是192而不是194.显然，AutoPrefixer使用该值来计算-webkit-min-device-pixel-ratio条件，那些额外的2px导致它计算稍大于2的值 - 并且因为它不同到之前声明的-webkit-min-device-pixel-ratio值，它作为附加行被添加到条件中。

道德：检查你的数学。

AutoPrefixer为基于分辨率的媒体查询添加了一个奇怪的额外条件

1 个答案: