Jasinski Technical Wiki

Navigation

Home Page
Index
All Pages

Quick Search
»
Advanced Search »

Contributor Links

Create a new Page
Administration
File Management
Login/Logout
Your Profile

Other Wiki Sections

Software

PoweredBy

Page History: Media Queries

Compare Page Revisions



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


Page Revision: Mon, Oct 07, 2013, 9:20 AM


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;
     }
}

ScrewTurn Wiki version 3.0.1.400. Some of the icons created by FamFamFam. Except where noted, all contents Copyright © 1999-2024, Patrick Jasinski.