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

Media Queries

RSS
Modified on Tue, Oct 29, 2013, 2:48 PM by Administrator Categorized as HTML and CSS
Thanks to Ryan Burnett for some of the content of this article!

HTML

Read http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/ to understand why the following HTML is recommended for mobile sites.

<meta name="viewport" content="initial-scale=1">

CSS

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

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