0

我正在设置一个 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 插入了一个奇怪的额外行。这是我在AutoPrefixed之前编译的输入：

@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）。

4

1 回答 1

0

啊。这是飞行员的失误。

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

道德：检查你的数学。

于 2016-06-04T17:10:36.550 回答