Css Media Queries

gistfile1.css

/* Portrait */
@media screen and (orientation:portrait) {
  /* Portrait styles */
}

/* Landscape */
@media screen and (orientation:landscape) {
  /* Landscape styles */
}

/* width <= 320px */
@media screen and (max-width: 320px) {
  body {
    ...
  }
}

/* width >= 1024px */
@media screen and (min-width: 1024px) {
  body {
    ...
  }
}

/* retina */
@media 
  only screen and (-webkit-min-device-pixel-ratio: 1.5), 
  only screen and (min-device-pixel-ratio: 1.5) {
    .logo {
      background-image: url(logo@2x.png);
      ...
    }
  }

/* hoisting */
@media screen and (max-width: 320px) {...} /* under 320px */
@media screen and (max-width: 480px) {...} /* from 321px to 480px */