CSS3 HTML & CSS

Using CSS3 Media Queries

Have you ever visited a site on your handheld device and found yourself having to pinch the screen to zoom into the content? That’s because the screen dimensions have changed but the site hasn’t adapted. This is where media quires are needed and CSS3 caters beautifully to this.

As part of the CSS3 specification, media queries allow you to define specific styles to elements throughout your site, so the content adapts to the size of the screen it’s being viewed on. This is done by setting specific values to things like the height, width, colour and resolution of elements to enhance the browsing experience. This method of presenting websites on multiple screen sizes is becoming increasingly popular and practically becoming the norm when creating websites as the web is now in its responsive age.

Prerequisites:

  • Fair bit of HTML and CSS
  • Familiarities with responsive design

Including Media Queries into your stylesheets

It can be rather daunting when starting out with media queries, but the truth is, with basic understanding of responsive design and the organisation of your stylesheet, you can quickly grasp this practice and start applying it to your own projects. Speaking of stylesheets, say you want to include media queries in your site to accommodate for different screen sizes, for example, desktop viewing, tablets and mobile, then this can easily be achieved by using multiple stylesheets, however, this isn’t usually good practice as the server will have to request more than one sheet as opposed to a single stylesheet. If you do decide on using multiple stylesheets, in practice, it would look something like this:

Style sheet for print:

This would be the stylesheet that contains all the media queries for mobile devices:

This would be the stylesheet that contains all the media queries for larger screens:

So let’s see how we can write some media queries to target our max and min-width displays. Once you have your stylesheet opened, head down to the bottom of your .css file as its usually good practice to include your queries after your style values.

To begin, we want to define the media and its type by using an @ sign followed by some parentheses containing the query.

Within some curly braces we will add the CSS styles we want our site to adopt. Anything contained within these curly braces will not be applied unless the viewing device has a max width of 480px or less. With the above query, this will target any device with a max-width of 480px and display the body text of the site at 14px.

If you wanted to target devices with a max-width of 1000px or less, you would define the media and its type the same way as the query above but just change the max-width value. This time if the browser detects the stated width, it will hide the #nav-bar.

Although these queries are fictional, they are great examples to show you how you can target specific screen sizes in the same stylesheet and change elements around your site as the browsers detect each query.

Browser support

All modern browsers like Firefox, Chrome, Opera (expect version 9.0) and Safari all support CSS3 media queries. Internet Explorer versions 9.0, 10.0 and 11.0 also support media queries but versions 8.0 and below unfortunately doesn’t. However, there is a jQuery plugin called css3-mediaqueries-js that supports the use of media queries in IE 8.0 and below. To use this plugin, head over to https://code.google.com/p/css3-mediaqueries-js/ and download it. Once you have downloaded it, source it in your HTML document within some <script> tags and place before your <body> tags, then write your queries in your stylesheets as shown above but be aware that it has been said that this method doesn’t work with imported stylesheets although I haven’t tried this myself. To check out some more information regarding browser support check out caniuse.com/css-mediaqueries.

Further reading and resources

  • Implementing Responsive Design – Tim Kadlec (Chapter 3: Media Queries)
  • Responsive Web Design – Ethan Marcotte (Chapter 4: Media Queries)

http://mediaqueri.es/
http://www.w3.org/TR/css3-mediaqueries/


Leave a Reply

%d bloggers like this: