Created
October 3, 2012 18:24
-
-
Save chriscoyier/3828790 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media only screen and (min-width: 320px) { | |
| /* Small screen, non-retina */ | |
| } | |
| @media | |
| only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px), | |
| only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px), | |
| only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px), | |
| only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px), | |
| only screen and ( min-resolution: 192dpi) and (min-width: 320px), | |
| only screen and ( min-resolution: 2dppx) and (min-width: 320px) { | |
| /* Small screen, retina, stuff to override above media query */ | |
| } | |
| @media only screen and (min-width: 700px) { | |
| /* Medium screen, non-retina */ | |
| } | |
| @media | |
| only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px), | |
| only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 700px), | |
| only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px), | |
| only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px), | |
| only screen and ( min-resolution: 192dpi) and (min-width: 700px), | |
| only screen and ( min-resolution: 2dppx) and (min-width: 700px) { | |
| /* Medium screen, retina, stuff to override above media query */ | |
| } | |
| @media only screen and (min-width: 1300px) { | |
| /* Large screen, non-retina */ | |
| } | |
| @media | |
| only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px), | |
| only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 1300px), | |
| only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1300px), | |
| only screen and ( min-device-pixel-ratio: 2) and (min-width: 1300px), | |
| only screen and ( min-resolution: 192dpi) and (min-width: 1300px), | |
| only screen and ( min-resolution: 2dppx) and (min-width: 1300px) { | |
| /* Large screen, retina, stuff to override above media query */ | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi Chris!
I don't think these Media Queries are that ideal. ;-)
First of all you do not mention that there are a lot of mobile devices out there which have a lower resolution than the Retina display, but a higher one than Desktop screens (e.g. device-pixel-ratio: 1.5)
Secondly assume you are on a high resolution (device-pixel-ratio >= 2) screen with at least a width of 1300px then all of your MQ matches! That means you have to carefully watch out to overwrite each and every property.
In my general understanding it would be best to have
BTW: I also do not like the naming particularly well ..., as we do not want to match certain devices like iPhone or iPad, but instead their respective capabilities. For an author it does not matter if it is an iPhone or not. All he needs to know is that it is a touch device with a certain resolution and viewport size.
I hope you get the points even though my English is a bit rusty (and not my mother tongue).
Cheers
Gunther