Approaching a site responsively requires a responsible approach. The very nature of responsive design enables the site to work across multiple devices and browsers so we need to take the capabilities of these when developing the sites.
With the arrival and wide spread support of CSS3 media queries now make our lives much simpler. Learn when you min/max, device or width.
| Feature | Value | Min/Max | Description |
width |
Length | Yes | Width of display area |
height |
Length | Yes | Height of display area |
device-width |
Length | Yes | Width of device |
device-height |
Length | Yes | Height of device |
orientation |
portrait or landscape |
No | Orientation of device |
aspect-ratio |
Ratio (w/h) | Yes | Ratio of width to height, expressed as two integers separated by a slash (e.g., 16/9) |
device-aspect-ratio |
Ratio (w/h) | Yes | Ratio of device-width to device-height |
color |
Integer | Yes | Number of bits per color component (if not color, the value is 0) |
color-index |
Integer | Yes | Number of entries in the output device’s color lookup table |
monochrome |
Integer | Yes | Number of bits per pixel in the monochrome frame buffer (if not monochrome, the value is 0) |
resolution |
Resolution | Yes | Density of pixels of output device, express as integer followed by dpi (dots per inch) or dpcm (dots per centimeter) |
scan |
Progressive or interlace |
No | Scanning process used by TV devices |
grid |
0 or 1 | No | If set to 1, the device is grid-based, such as a teletype terminal or phone display with only one fixed font (all other devices are 0) |
To find out which browsers support these techniques check out Can I Use.
