Page History: Media Queries

Compare Page Revisions

7 6 5 4 3 2 1 0 Current 7 6 5 4 3 2 1 0

« Older Revision - Back to Page History - Newer Revision »

Page Revision: Sat, Oct 26, 2013, 12:39 PM

Thanks to Ryan Burnett for some of the content of this article!

Various Devices¶

/* Motorola Atrix 2, portrait */
@media only screen and (min-device-width: 540px) and (max-device-width: 599px) and (orientation: portrait) {
    html2 { background: yellow; }
    td { font-size: 3em;}
}
/* Kindle Fire, portrait */
@media only screen and (min-device-width: 600px) and (max-device-width: 767px) and (orientation: portrait) {
    html2 { background: green; }
    td { font-size: 1.5em;}
}
/* iPad, 1st gen, portrait */
@media only screen and (min-device-width: 768px) and (orientation: portrait) {
    html2 { background: magenta; }
    td { font-size: 1.5em;}
}
/* iPad, 1st gen, landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 959px) and (orientation: landscape) {
    html2{ background: orange; }
    td { font-size: 1.2em;}
}
/* Motorola Atrix 2, landscape */
@media only screen and (min-device-width: 960px) and (max-device-width: 1023px) and (orientation: landscape) {
    html2 { background: red; }
    td { font-size: 2em;}
}
/* Kindle Fire, landscape */
@media only screen and (min-device-width: 1024px) and (orientation: landscape) {
    html 2{ background: blue; }
    td { font-size: 1.5em;}
}

em min-width (mobile first)¶

• Must be in this order and at the bottom of the stylesheet
• Portrait is default and desktop overrides portrait
• 1em ~= 16px
  

/* iPhone portrait - 0-479px no media query needed */
html {
     background:red;
}
/* iPhone landscape - 480px-767px (480/16) */
@media only screen and (min-width: 30em) {
     html {
          background:orange;
     }
}
/* iPad portrait - 768px-1023px (768/16) */
@media only screen and (min-width: 48em) {
     html {
          background:yellow;
     }
}
/* iPad landscape - 1024px-1199px (1024/16) */
@media only screen and (min-width: 64em) {
     html {
          background:green;
     }
}
/* Desktop 1200px and up (1200/16) */
@media only screen and (min-width: 75em) {
     html {
          background:blue;
     }
}

px min-width (mobile first)¶

• Must be in this order and at the bottom of the stylesheet
• Portrait is default and desktop overrides portrait
• 1em ~= 16px
  

/* iPhone portrait - 0-479px no media query needed */
html {
     background:red;
}
/* iPhone landscape - 480px-768px */
@media only screen and (min-width: 480px) {
     html {
          background:orange;
     }
}
/* iPad portrait - 768px-1024px */
@media only screen and (min-width: 768px) {
     html {
          background:yellow;
     }
}
/* iPad landscape - 1024px-1200px */
@media only screen and (min-width: 1024px) {
     html {
          background:green;
     }
}
/* Desktop 1200px and up */
@media only screen and (min-width: 1200px) {
     html {
          background:blue;
     }
}

px max-width¶

• Must be in this order and at the bottom of the stylesheet
• Landscape applies to both while portrait overrides landscape
  

/* Huge - 1232px */
@media only screen and (min-width: 1232px) {
     html {
          background:red;
     }
}
/* Desktop - 1056px-1200px + 31px scrollbar */
@media only screen and (max-width: 1231px) {
     html {
          background:orange;
     }
}
/* iPad landscape - 800px-1024px + 31px scrollbar */
@media only screen and (max-width: 1055px) {
     html {
          background:yellow;
     }
}
/* iPad portrait - 512px-768px + 31px scrollbar */
@media only screen and (max-width: 799px) {
     html {
          background:green;
     }
}
/* iPhone landscape - 351px-480px + 31px scrollbar */
@media only screen and (max-width: 511px) {
     html {
          background:blue;
     }
}
/* iPhone portrait - 0-320px + 31px scrollbar */
     html {
          background:purple;
     }
}