How to use Media Queries for Responsive Design

A guide to creating pages that display correctly on a range of viewing devices Media Queries have long been considered a bit of a dark art by a large number of web developers, but since the appearance of CSS3, they have actually been relatively simple to implement. Media Queries check devices that are attempting to view your content for certain features which will determine the way the content must be viewed, and implement this accordingly. Tablet, ultrabook or laptop – your website has to be viewable on each. A notebook is likely to have different viewing and interaction requirements to a tablet PC. Here’s a short summary of how to use Media Queries to make your website easily accessible to all.

Image Credit: “Screen Techonology” from Shutterstock

So, we are going to link different style sheets corresponding to the size of the browser window to the same HTML page. This will help us to avoid

s that crash and mess up our website.

First up, there’s the W3C (World Wide Web standard) way. In your ‘head’, you would write:

Media Queries for Responsive Design

Media Queries for Responsive Design
Check for the horizontal pixel count and insert a different number accordingly

This code attaches a style sheet specifically for devices that use a screen (including screen readers for the visually impaired) and have a minimum display width of 800 pixels. Unfortunately, this will not work for devices with ‘Retina’, or ‘Hi-DPI’ displays as they report a pixel width much greater than what the viewer effectively perceives (most of them are scaled to quarter the size). So what’s a better way to write this code?

Media Queries for Responsive Design
The problem with ‘Hi-DPI’ displays

If you change your Media Query to assess the viewport, then you’ll have more consistent results. Viewport size is detected by the browser, which – in modern browsers – adjusts to ‘Retina’ or ‘Hi-DPI’ displays.

Media Queries for Responsive Design

This query will check the size of the browser window (automatically adjusted if for Retina and Hi-DPI displays), and supply the correct style sheet according where it falls in a range of viewport sizes. Simple!

Some browsers, however, do not support Media Queries (Internet Explorer 6, 7 and 8, I’m looking at you!). So we need to provide a workaround, or risk the whole website failing through lack of comprehensive support.

Media Queries for Responsive Design
IE 6, 7 and 8 do not support Media Queries

To avoid this use:

Media Queries for Responsive Design

Inserting the ‘only’ word ahead of the Media Query lets IE 6, 7 and 8 know that they can ignore it.

By following these steps, you can add progressively complex Media Queries to your website, and make sure that your design is fluid and responsive on all platforms.

Author’s Bio:

Joanna Stevenson studied mechanical engineering in London, and currently works for an energy research and consulting firm. She enjoys writing tech articles in her free time. She aspires to be an intrepid tech and gaming enthusiast with the exploratory spirit and witty prose of her favorite author of Robert Louis Stevenson. Treasure Island for the tech world.

This entry was posted in Responsive Web Design. Bookmark the permalink.