Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there any media query for non-retina display?

Tags:

css

retina

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?

like image 465
Ian Y. Avatar asked Jul 23 '15 04:07

Ian Y.


People also ask

What type of media query can you use for a screen reader?

'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.

Why we use only screen in media query?

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.

Which CSS media query would you use to target a high resolution mobile display?

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; .


1 Answers

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

}
like image 129
Galen Gidman Avatar answered Sep 30 '22 00:09

Galen Gidman