css - CSS @media 检查是否不是 Webkit

Question

我正在尝试创建一个 CSS 文件，如果浏览器使用的是 webkit，则应用一种样式，如果不是，则应用另一种样式。我阅读了如何检查它是否正在使用 Webkit：

@media (-webkit-min-device-pixel-ratio:0)

但是，我不知道如何检查它是否没有使用 Webkit。我尝试not在媒体查询前面添加，但它似乎不起作用。有人有解决方案或更好的方法吗？谢谢。

Answer 1

我仍然坚持我的评论，但这是我能想到的最好的。再一次，not是不是没有错对。你试着弄清楚那个。

所以：

html, body {
    background: blue;
}
@media all -webkit-device-pixel-ratio {
    body {
        background: black;
        color: red;
        font: bold 28px monospace;
    }
}
@media not -webkit-device-pixel-ratio {
    body {
        background: lime;
    }
}

http://jsfiddle.net/userdude/pyvYA/4/

编辑

这也被建议为工作：

@media screen and (-webkit-min-device-pixel-ratio:0) {}

真正奇特的是，Chrome 让你不为所动，并提升了你所有人。当然，它认为两者都匹配没有错，而 Firefox 尽职尽责地看起来有点石灰。

美好的时光。您可能可以调整顺序并通过移动它来让所有覆盖不；请记住，它继承了这一点，因为您知道，Chrome 会做它想做的事。

使用 yepnope.js 和 selectivzr.js 试试 Modernizr。这些都执行得很好。

Answer 2

您可以尝试使用 min：

@media screen (-webkit-min-device-pixel-ratio: 0)

和最大值：

@media screen (-webkit-max-device-pixel-ratio: 0)

Answer 3

我在处理 时遇到了这个问题-webkit-line-clamp，目前这似乎是 webkit 唯一的功能。

所以我为此创建的 scss mixin 是

@mixin line-clamp($line) {
  height: calc(1.3em * #{$line});
  &:after {
    content: '...';
  }

  @media screen and (-webkit-min-device-pixel-ratio:0) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $line;
  }

  @media screen and (min--moz-device-pixel-ratio:0) {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
    padding-right: 10px;
    &:after {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
}

它使用不同的媒体查询来区分 webkit 和 firefox 的 scss。