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.

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.