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?
'Reader' is a keyword for use in Media Queries [MEDIAQ]. When a Media Query that includes the 'reader' keyword is attached to (a link to) a style sheet, it indicates that that style sheet is designed to be used by a "reader" device (typically a screen reader), that both displays and speaks a document at the same time.
only screen: The only keyword is used to prevent older browsers that do not support media queries with media features from applying the specified styles.
In the CSS, we want to add a (max-width: 600px) for the media query which tells the computer to target devices with a screen width of 600px and less. Inside the media query, we change the background styles for the body to background-color: #87ceeb; .
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 */
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With