是否有任何非视网膜显示的媒体查询？

Question

根据an article on CSS-Tricks，视网膜显示的未来证明媒体查询可以写成：

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

  /* Retina-specific stuff here */

}

如果我想为非视网膜显示编写 CSS 代码怎么办？

我知道你可以先为非 Retina 显示写一些 CSS 代码，然后用上面的媒体查询覆盖 Retina 显示。但是有没有专门针对非视网膜显示的媒体查询？

Answer 1

This article，也在 CSS-Tricks 上，指出您可以使用 not 反转逻辑。所以理论上：

@media
not screen and (-webkit-min-device-pixel-ratio: 2),
not screen and (   min--moz-device-pixel-ratio: 2),
not screen and (     -o-min-device-pixel-ratio: 2/1),
not screen and (        min-device-pixel-ratio: 2),
not screen and (                min-resolution: 192dpi),
not screen and (                min-resolution: 2dppx) { 

  /* non-Retina-specific stuff here */

}

是否有任何非视网膜显示的媒体查询？

Is there any media query for non-retina display?

css

retina