是否有针对非视网膜显示器的媒体查询? [英] Is there any media query for non-retina display?

问题描述

根据关于CSS技巧的文章，视网膜显示的未来证明媒体查询可以写为:

According to an article on CSS-Tricks, the future proof media queries for retina display can be wrote as:

@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代码怎么办?

What if I want to write CSS codes for non-retina display?

我知道您可以先为非视网膜显示编写一些CSS代码，然后使用上述媒体查询将其覆盖为视网膜显示.但是，有没有专门针对非视网膜显示的媒体查询?

I know you can write some CSS codes for non-retina display first, and then overwrite it for retina display with the above media queries. But is there any media query which is specifically for non-retina display?

推荐答案

本文，同样在CSS-Tricks上，指出您可以用not反转逻辑.所以从理论上讲:

This article, also on CSS-Tricks, states that you can reverse the logic with not. So in theory:

@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 */

}

这篇关于是否有针对非视网膜显示器的媒体查询?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！