@media queries – the bandwagon banter

.titanic { float: none; }

“This is soooooo old hat” some cutting edge web developers will say. But then someone will point the finger and say, “you are a hypocrite, practice what you preach”. We’ve been there or know someone who has. For me I only really started to FULLY embrace @media queries maybe about 5 years ago or so and this was due to the environments I coded in on a corporate level and to be honest it did take a while before I learned how to start using this properly – as simple is it seems.

Media queries isn’t something new to CSS3 (for those already converted please look away now), this was something that already worked with HTML4 and CSS2. Features such as height, width and color were already being freely utilised. Included in that were the Media Types such as screen and print.

Despite the aforementioned, many were accustomed (me included) to using the following method;

Or even the below, which also contains the feature parameters of a devices width. This would tell the browser that the type of media the stylesheet is set for a screen and that it only applies for screen width of up to 480px in width. So it’s targeting a mobile browsers screen, like and iPod/iPhone for example. This is what responsive web methodology and design embraces right? Right so;

Now as I’ve already said we have travelled some distance regarding method of implementation. “If it’s not broke don’t fix it.” Seriously??! This is where I remember having to change my own approach to things, otherwise I’d be like Michael J Fox from Back to the Future II. Anyway back to the subject in discussion!

Some obvious advantages using today’s methods;

  • You can combine multiple stylesheets into one (no more separate CSS files for each screen size or device screen dimension)
  • More manageable rules and classes
  • A more responsive website

A typical utilisation of using @media queries would be to cater for various screen widths, therefore device (to a point – not completely) all within the same CSS file;

@media all and (max-width: 530px) {
   .your-class-or-id {}
@media only screen and (max-device-width: 480px) {
   .your-class-or-id {}

However another way of targeting screen widths is by using ‘device-aspect-ratio’ and this is where you do more than simply target a screen width, now you’re targeting is a lot more specific;

@media screen and (device-aspect-ratio: 1280/720) {
   .your-class-or-id {}

Some say that this can have it’s disadvantages as it is too specific, however I have not used this method enough to form an opinion. In short that is another debate!

Seeing the responsive web methodology in action (manually drag your browser window width to see the CSS change the page layout and do a David Blaine);

A List Apart
Hicks Design
Rio HQ

There are loads more examples out there (Google search for ‘Media Queri’). Do you implement media queries in your web builds yet and if so what methods do you use? I’d be interested in hearing your own experiences.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.