是否有非视网膜显示的媒体查询?

时间:2015-07-23 04:23:04

标签: css css3 retina

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

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

1 个答案:

答案 0 :(得分:7)

This article,同样基于CSS-Tricks,声明你可以不用反转逻辑。所以在理论上:

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

}