Responding with media queries


With handheld devices like smart phones and tablets becoming more and more common, making a new version of a web site for each size or resolution simply isn’t viable.

Media queries are an extension of media types, which add the power of evaluating certain properties of a media type. Where before we could only specify, for example, that a style sheet or some CSS was for print, we can now specify that it is for printers that can print at a resolution of 300dpi. Where this becomes so powerful for handheld devices is when we target CSS to maximum or mimimum widths, heights or even resolutions. We can then adapt our design to fit different devices and sizes, and provide the user with the best experience for that device. This is known as responsive web design.

In it’s most basic form, a media query looks like this:

@media screen (max-width: 1000px) { /* CSS to apply when the media query is true goes here */ body { background-color: red; } }

What this query does is make the body background colour red when the browser’s viewport is less than 1000px wide.

Media queries can be used to apply CSS based on a lot of different properties. Here are the most usefull for mobile:

Width (width, min-width, max-width)
Width is the viewport width of the browser, including scroll bars. On hand held devices, most browsers are always full screen, but you can use device-width to check the actual screen width.
Example: @media (min-width: 800px) and (max-width: 1024px) { }

Height (height, min-height, max-height)
Like width, height is the viewport height of the browser, including scroll bars.
Example: @media (min-height: 400px) and (max-height: 600px) { }

Device Width (device-width, min-device-width, max-device-width)
Example: @media (device-width: 800px) { }

Device Height (device-height, min-device-height, max-device-height)
Example: @media (device-height: 600px) { }

Orientation (orientation)
The values for orientation are ‘portrait’ or ‘landscape’. The orientation will trigger portrait when the viewport height is greater than or equal to the viewport width.
Example: @media (orientation: portrait) { }

Another usefull one for detecting iphone4 is:
@media (-webkit-min-device-pixel-ration: 2) { }

Have a look at the spec for a comprehensive list of properties.

Media queries can also be enhanced by having more than one property, which are linked together with an ‘and’. This means – if all properties are true, than the media query is applied.

If you need to apply some CSS based on if a media query isn’t true, you can use the ‘not’ keyword like this:
@media not screen (width: 800px) and (height: 600px;) { }

You can also have multiple media queries for a group of CSS like you can with multiple selectors. If one or more of the queries is true, the CSS is applied. For example:
@media (width: 800px), (height: 600px) { }

Armed width media queries, we can now use CSS to tailor the experience of one site to all sorts of devices.

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top