问题
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