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