Created
August 27, 2013 08:25
-
-
Save srkmrs/6351057 to your computer and use it in GitHub Desktop.
Retina Display Media Query
This file contains hidden or 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
| Retina Display Media Query | |
| For including high-res graphics, but only for screens that can make use of them. "Retina" being "2x": | |
| @media | |
| (-webkit-min-device-pixel-ratio: 2), | |
| (min-resolution: 192dpi) { | |
| /* Retina-specific stuff here */ | |
| } | |
| Or other highish-res: | |
| /* 1.25 dpr */ | |
| @media | |
| (-webkit-min-device-pixel-ratio: 1.25), | |
| (min-resolution: 120dpi){ | |
| /* Retina-specific stuff here */ | |
| } | |
| /* 1.3 dpr */ | |
| @media | |
| (-webkit-min-device-pixel-ratio: 1.3), | |
| (min-resolution: 124.8dpi){ | |
| /* Retina-specific stuff here */ | |
| } | |
| /* 1.5 dpr */ | |
| @media | |
| (-webkit-min-device-pixel-ratio: 1.5), | |
| (min-resolution: 144dpi){ | |
| /* Retina-specific stuff here */ | |
| } | |
| Old Stuff (don't use, keeping for posterity) | |
| @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) { | |
| /* Retina-specific stuff here */ | |
| } | |
| This is more future proof... | |
| @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 */ | |
| } | |
| Notes: | |
| The super weird min--moz-device-pixel-ratio is probably a bug, might wanna put in -moz-min-device-pixel-ratio also in case they fix it but leave it prefixed. | |
| Here's the spec on resolution units. | |
| Example: | |
| Let's say you had three major breakpoints in a design. This design also had a large background graphic and you wanted it looking it's best on any screen (retina or not) and not waste any bandwidth. You'd set up 6 media queries, one for each breakpoint and one for each one of those breakpoints on retina. Then you'd override the background image all the way down. | |
| @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 */ | |
| } | |
| Reference URLs : | |
| http://css-tricks.com/snippets/css/retina-display-media-query/ | |
| http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment