October 6, 2012 in Mobile Web Design, Responsive Web Design

Responsive Web Design: Media Queries


Media Queries allow us to design for different kinds of media, you have probably seen these used to create a print stylesheet for your web document.

The W3C (World Wide Web Consortium) who standardise web technologies have introduced a whole array of Media Queries to cope with our varied device landscape;

Media queries can identify types of media; Screen, Print Braille, but they can also importantly identity the physical characteristics of the viewing device, for instance the width of the screen.

The media queries can be housed inside the @media declaration inside our stylesheet:

@media screen and (min-width: 1024px) {
body{font-size: 100%;}
}

Every Media Query has two parts, in this example; a media type of Screen followed by the query itself of Min Width.

If a web browser reads this stylesheet it asks two conditional questions; does this belong to the Screen Media Type and is the browser viewport at least 1024px in width. If so, then load the CSS. If not, then do not load the CSS.

You can also place media queries on Link elements and load a whole style sheet conditionally, here’s the example above as a link:

<link rel="stylesheet" href="desktop.css" media="screen and 
(min-width: 1024px);" />

The takeaway from exploring the use of Media Queries is that you can conditionally load stylesheets depending on the browsers width.

A desktop PC with a screen size of 1024px could have a Media Query load a stylesheet which formats wide screens, a iPhone 4 could have a Media Query load a stylesheet which formats the iPhones 320px width screen.

You can even use Media Queries to load a stylesheet depending on the orientation of the device, for instance when you turn your iPhone round 90 degrees from portrait to landscape view.


About Anthony

Anthony Brewitt is Design Bit, has been for years - he's an experienced WordPress Designer, and Muggle-born Marketing Philosopher. Let’s talk about your website; your marketing, blog design, and that cool new mobile web thingy. Contact Anthony

Leave a Reply