{"id":17757,"date":"2012-08-15T20:53:27","date_gmt":"2012-08-16T03:53:27","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=17757"},"modified":"2013-02-14T09:13:25","modified_gmt":"2013-02-14T16:13:25","slug":"retina-display-media-query","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/css\/retina-display-media-query\/","title":{"rendered":"Retina Display Media Query"},"content":{"rendered":"<p>For including high-res graphics, but only for screens that can make use of them. &#8220;Retina&#8221; being &#8220;2x&#8221;:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">@media \r\n(-webkit-min-device-pixel-ratio: 2), \r\n(min-resolution: 192dpi) { \r\n    \/* Retina-specific stuff here *\/\r\n}<\/code><\/pre>\n<p>Or other highish-res:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">\/* 1.25 dpr *\/\r\n@media \r\n(-webkit-min-device-pixel-ratio: 1.25), \r\n(min-resolution: 120dpi){ \r\n    \/* Retina-specific stuff here *\/\r\n}\r\n\r\n\/* 1.3 dpr *\/\r\n@media \r\n(-webkit-min-device-pixel-ratio: 1.3), \r\n(min-resolution: 124.8dpi){ \r\n    \/* Retina-specific stuff here *\/\r\n}\r\n\r\n\/* 1.5 dpr *\/\r\n@media \r\n(-webkit-min-device-pixel-ratio: 1.5), \r\n(min-resolution: 144dpi){ \r\n    \/* Retina-specific stuff here *\/\r\n}<\/code><\/pre>\n<h3>Old Stuff (don&#8217;t use, keeping for posterity)<\/h3>\n<pre rel=\"CSS\" class=\"lang-css\"><code>@media\r\nonly screen and (-webkit-min-device-pixel-ratio: 2),\r\nonly screen and (   min--moz-device-pixel-ratio: 2),\r\nonly screen and (     -o-min-device-pixel-ratio: 2\/1) { \r\n  \r\n  \/* Retina-specific stuff here *\/\r\n\r\n}<\/code><\/pre>\n<p>This is more future proof&#8230;<\/p>\n<pre rel=\"CSS\" class=\"lang-css\"><code>@media\r\nonly screen and (-webkit-min-device-pixel-ratio: 2),\r\nonly screen and (   min--moz-device-pixel-ratio: 2),\r\nonly screen and (     -o-min-device-pixel-ratio: 2\/1),\r\nonly screen and (        min-device-pixel-ratio: 2),\r\nonly screen and (                min-resolution: 192dpi),\r\nonly screen and (                min-resolution: 2dppx) { \r\n  \r\n  \/* Retina-specific stuff here *\/\r\n\r\n}<\/code><\/pre>\n<p>Notes:<\/p>\n<ul>\n<li>The super weird <code>min--moz-device-pixel-ratio<\/code> is probably a bug, might wanna put in <code>-moz-min-device-pixel-ratio<\/code> also in case they fix it but leave it prefixed.<\/li>\n<li>Here&#8217;s the <a href=\"http:\/\/www.w3.org\/TR\/css3-values\/#resolution\" rel=\"noopener\">spec on resolution units<\/a>.<\/li>\n<\/ul>\n<p>Example:<\/p>\n<p>Let&#8217;s say you had three major breakpoints in a design. This design also had a large background graphic and you wanted it looking it&#8217;s best on any screen (retina or not) and not waste any bandwidth. You&#8217;d set up 6 media queries, one for each breakpoint and one for each one of those breakpoints on retina. Then you&#8217;d override the background image all the way down.<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">@media only screen and (min-width: 320px) {\r\n\r\n  \/* Small screen, non-retina *\/\r\n\r\n}\r\n\r\n@media\r\nonly screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),\r\nonly screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),\r\nonly screen and (     -o-min-device-pixel-ratio: 2\/1)    and (min-width: 320px),\r\nonly screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),\r\nonly screen and (                min-resolution: 192dpi) and (min-width: 320px),\r\nonly screen and (                min-resolution: 2dppx)  and (min-width: 320px) { \r\n\r\n  \/* Small screen, retina, stuff to override above media query *\/\r\n\r\n}\r\n\r\n@media only screen and (min-width: 700px) {\r\n\r\n  \/* Medium screen, non-retina *\/\r\n\r\n}\r\n\r\n@media\r\nonly screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),\r\nonly screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),\r\nonly screen and (     -o-min-device-pixel-ratio: 2\/1)    and (min-width: 700px),\r\nonly screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),\r\nonly screen and (                min-resolution: 192dpi) and (min-width: 700px),\r\nonly screen and (                min-resolution: 2dppx)  and (min-width: 700px) { \r\n\r\n  \/* Medium screen, retina, stuff to override above media query *\/\r\n\r\n}\r\n\r\n@media only screen and (min-width: 1300px) {\r\n\r\n  \/* Large screen, non-retina *\/\r\n\r\n}\r\n\r\n@media\r\nonly screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),\r\nonly screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),\r\nonly screen and (     -o-min-device-pixel-ratio: 2\/1)    and (min-width: 1300px),\r\nonly screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),\r\nonly screen and (                min-resolution: 192dpi) and (min-width: 1300px),\r\nonly screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { \r\n\r\n  \/* Large screen, retina, stuff to override above media query *\/\r\n\r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>For including high-res graphics, but only for screens that can make use of them. &#8220;Retina&#8221; being &#8220;2x&#8221;: @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: [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3222,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17757"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=17757"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17757\/revisions"}],"predecessor-version":[{"id":18763,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17757\/revisions\/18763"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3222"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=17757"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=17757"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}