Sass Media Queries

media-queries.scss

// ref: http://paranoida.github.io/sass-mediaqueries/


@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
  // special defined
}

// iPad
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  // special defined
}
// iPad landscape
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  // special defined
}
// iPad portrait
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  // special defined
}
// iPad Retina
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-device-pixel-ratio: 2) {
  // special defined
}
// iPad Retina landscape
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) {
  // special defined
}
// iPad Retina portrait
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
  // special defined
}
// iPhone 3
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 1) {
  // special defined
}
// iPhone 3 landscape
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 1) and (orientation: landscape) {
  // special defined
}
// iPhone 3 portrait
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 1) and (orientation: portrait) {
  // special defined
}
// iPhone 4
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2 / 3) {
  // special defined
}
// iPhone 4 landscape
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2 / 3) and (orientation: landscape) {
  // special defined
}
// iPhone 4 protrait
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2 / 3) and (orientation: portrait) {
  // special defined
}
// iPhone 5
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40 / 71) {
  // special defined
}
// iPhone 5 landscape
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40 / 71) and (orientation: landscape) {
  // special defined
}
// iPhone 5 portrait
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40 / 71) and (orientation: portrait) {
  // special defined
}

// max-width
@media screen and (max-width: 320px) {
  // special defined
}
@media screen and (max-width: 480px) {
  // special defined
}
@media screen and (max-width: 768px) {
  // special defined
}
@media screen and (max-width: 1024px) {
  // special defined
}
@media screen and (max-width: 1200px) {
  // special defined
}
@media screen and (max-width: 1400px) {
  // special defined
}
@media screen and (max-width: 1600px) {
  // special defined
}

// min-width
@media screen and (min-width: 320px) {
  // special defined
}
@media screen and (min-width: 480px) {
  // special defined
}
@media screen and (min-width: 768px) {
  // special defined
}
@media screen and (min-width: 1024px) {
  // special defined
}
@media screen and (min-width: 1200px) {
  // special defined
}
@media screen and (min-width: 1400px) {
  // special defined
}
@media screen and (min-width: 1600px) {
  // special defined
}

// max-height
@media screen and (max-height: 320px) {
  // special defined
}
@media screen and (max-height: 480px) {
  // special defined
}
@media screen and (max-height: 768px) {
  // special defined
}
@media screen and (max-height: 1024px) {
  // special defined
}
@media screen and (max-height: 1200px) {
  // special defined
}
@media screen and (max-height: 1400px) {
  // special defined
}
@media screen and (max-height: 1600px) {
  // special defined
}
// min-height
@media screen and (min-height: 320px) {
  // special defined
}
@media screen and (min-height: 480px) {
  // special defined
}
@media screen and (min-height: 768px) {
  // special defined
}
@media screen and (min-height: 1024px) {
  // special defined
}
@media screen and (min-height: 1200px) {
  // special defined
}
@media screen and (min-height: 1400px) {
  // special defined
}
@media screen and (min-height: 1600px) {
  // special defined
}