Is there any media query for non-retina display?

霸气de小男生 提交于 2019-12-06 06:09:42

问题


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

}

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

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?


回答1:


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

}


来源:https://stackoverflow.com/questions/31578116/is-there-any-media-query-for-non-retina-display

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!