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: Mon, Oct 07, 2013, 9:19 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;
     }
}