The @media query is 1/3 of the recipe for responsive design. It is the key ingredient that, in it’s simplest form, allows specified CSS to be applied depending on the device and whether it matches the media query criteria.
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | <span class="token comment" spellcheck="true">/* Smartphones (portrait and landscape) ----------- */</span> <span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span> <span class="token punctuation">:</span> 320px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-width</span> <span class="token punctuation">:</span> 480px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* Styles */</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">/* Smartphones (landscape) ----------- */</span> <span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-width</span> <span class="token punctuation">:</span> 321px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* Styles */</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">/* Smartphones (portrait) ----------- */</span> <span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">max-width</span> <span class="token punctuation">:</span> 320px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* Styles */</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">/* iPads (portrait and landscape) ----------- */</span> <span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span> <span class="token punctuation">:</span> 768px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-width</span> <span class="token punctuation">:</span> 1024px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* Styles */</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">/* iPads (landscape) ----------- */</span> <span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span> <span class="token punctuation">:</span> 768px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-width</span> <span class="token punctuation">:</span> 1024px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> landscape<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* Styles */</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">/* iPads (portrait) ----------- */</span> <span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span> <span class="token punctuation">:</span> 768px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-width</span> <span class="token punctuation">:</span> 1024px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> portrait<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* Styles */</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">/********** iPad 3 **********/</span> <span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span> <span class="token punctuation">:</span> 768px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-width</span> <span class="token punctuation">:</span> 1024px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> landscape<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-min-device-pixel-ratio</span> <span class="token punctuation">:</span> 2<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* Styles */</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span> <span class="token punctuation">:</span> 768px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-width</span> <span class="token punctuation">:</span> 1024px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> portrait<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-min-device-pixel-ratio</span> <span class="token punctuation">:</span> 2<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* Styles */</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">/* Desktops and laptops ----------- */</span> <span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-width</span> <span class="token punctuation">:</span> 1224px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* Styles */</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">/* Large screens ----------- */</span> <span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-width</span> <span class="token punctuation">:</span> 1824px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* Styles */</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">/* iPhone 4 ----------- */</span> <span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span> <span class="token punctuation">:</span> 320px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-width</span> <span class="token punctuation">:</span> 480px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> landscape<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-min-device-pixel-ratio</span> <span class="token punctuation">:</span> 2<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* Styles */</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span> <span class="token punctuation">:</span> 320px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-width</span> <span class="token punctuation">:</span> 480px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> portrait<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-min-device-pixel-ratio</span> <span class="token punctuation">:</span> 2<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* Styles */</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">/* iPhone 5 ----------- */</span> <span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span><span class="token punctuation">:</span> 320px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-height</span><span class="token punctuation">:</span> 568px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> landscape<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-device-pixel-ratio</span><span class="token punctuation">:</span> 2<span class="token punctuation">)</span></span><span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* Styles */</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span><span class="token punctuation">:</span> 320px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-height</span><span class="token punctuation">:</span> 568px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> portrait<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-device-pixel-ratio</span><span class="token punctuation">:</span> 2<span class="token punctuation">)</span></span><span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* Styles */</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">/* iPhone 6 ----------- */</span> <span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span><span class="token punctuation">:</span> 375px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-height</span><span class="token punctuation">:</span> 667px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> landscape<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-device-pixel-ratio</span><span class="token punctuation">:</span> 2<span class="token punctuation">)</span></span><span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* Styles */</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span><span class="token punctuation">:</span> 375px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-height</span><span class="token punctuation">:</span> 667px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> portrait<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-device-pixel-ratio</span><span class="token punctuation">:</span> 2<span class="token punctuation">)</span></span><span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* Styles */</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">/* iPhone 6+ ----------- */</span> <span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span><span class="token punctuation">:</span> 414px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-height</span><span class="token punctuation">:</span> 736px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> landscape<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-device-pixel-ratio</span><span class="token punctuation">:</span> 2<span class="token punctuation">)</span></span><span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* Styles */</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span><span class="token punctuation">:</span> 414px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-height</span><span class="token punctuation">:</span> 736px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> portrait<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-device-pixel-ratio</span><span class="token punctuation">:</span> 2<span class="token punctuation">)</span></span><span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* Styles */</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">/* Samsung Galaxy S3 ----------- */</span> <span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span><span class="token punctuation">:</span> 320px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-height</span><span class="token punctuation">:</span> 640px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> landscape<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-device-pixel-ratio</span><span class="token punctuation">:</span> 2<span class="token punctuation">)</span></span><span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* Styles */</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span><span class="token punctuation">:</span> 320px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-height</span><span class="token punctuation">:</span> 640px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> portrait<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-device-pixel-ratio</span><span class="token punctuation">:</span> 2<span class="token punctuation">)</span></span><span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* Styles */</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">/* Samsung Galaxy S4 ----------- */</span> <span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span><span class="token punctuation">:</span> 320px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-height</span><span class="token punctuation">:</span> 640px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> landscape<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-device-pixel-ratio</span><span class="token punctuation">:</span> 3<span class="token punctuation">)</span></span><span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* Styles */</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span><span class="token punctuation">:</span> 320px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-height</span><span class="token punctuation">:</span> 640px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> portrait<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-device-pixel-ratio</span><span class="token punctuation">:</span> 3<span class="token punctuation">)</span></span><span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* Styles */</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">/* Samsung Galaxy S5 ----------- */</span> <span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span><span class="token punctuation">:</span> 360px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-height</span><span class="token punctuation">:</span> 640px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> landscape<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-device-pixel-ratio</span><span class="token punctuation">:</span> 3<span class="token punctuation">)</span></span><span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* Styles */</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span><span class="token punctuation">:</span> 360px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-height</span><span class="token punctuation">:</span> 640px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> portrait<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-device-pixel-ratio</span><span class="token punctuation">:</span> 3<span class="token punctuation">)</span></span><span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* Styles */</span> <span class="token punctuation">}</span> |