Media Query Fact Sheet

Something to keep at hand so you can check on all the possibilities and see the measurements.

Device Features that can be used in media queries

  • width (min and max)
  •  height (min and max)
  •  device-width
  •  device-height
  •  orientation
  •  aspect-ratio
  •  device-aspect-ratio
  •  color
  •  color-index
  •  monochrome
  •  resolution
  •  scan
  •  grid

These can be chained together with the word ‘and’

@media screen and (min-device-width: 480px) and (orientation: landscape) {
. . .
}

Device Resolutions

  • 320px for small screens in portrait mode
  • 480 px for small screens in landscape mode
  • 600 px smaller tablets like the Kindle and Nook
  • 768 px for tablets like the iPad in portrait mode
  • 1024 px for tablets like the iPad in landscape mode
  • 1200 px for wide screen displays

Leave a Reply