Responsive Web Design using CSS @media queries

Responsive Web Design is the hot topic in the latest state of the art web site and web applications. There are various techniques and technologies used to achived that. But one of the simplest and hottest is using the CSS @media queries.

Making a great looking web-page which works well on all the devices from Phones to large display screens, and from colored to monochrome printers is definitely a challenging tasks. The CSS @media tags for screen vs print has been supported for some time, and I have used this in couple of projects too. However when it comes to making good looking page for various screen resolutions, the usual procedure is to duplicate the page according to the target device/resolution. However, the new CSS3 @media queries may change this for all. When properly used, they make it possible to make a single page which display nice and perfect on almost all the devices and resolutions.

My source of inspiration for this article is the CSS-Tricks website. For a sample, just go to this site home-page, and then try to resize the page, and you will see that all the content fit very nice on all the resolutions, plus some of the images do change depending on the target resolution.

The magic for this lies in the CSS @media queries. These new CSS elements lets you define the conditional CSS classes for different factors including width, height, orientation, aspect ration, color, etc.

So far example, if you want to define two types of style classes. One for all the devices upto 800px wide, and the rest for the higher resolution, then you can do this by the following sample CSS media query:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@media screen
{
	body
	{
		background: rgb(255,255,136);
	}
}
 
@media screen and (max-width: 800px)
{
	body
	{
		background-color:rgb(182,224,38);
	}
}

The above CSS is pretty simple and straightforward. Basically, the first media query is empty, and will simply apply to all screen type devices. While the second @media query also define an additional limit for the display width of 800px. So far all the devices upto 800px, the second class will be used, and for all high resolution screens, the first class will be used.

Note: For the sample, I’m just changing the background color of the page, but this can be anything i.e. including new classes, html elemental override, etc.

The order in which define the CSS media queries is also important. You need to define this for broad category to limited device in the top to bottom order i.e. styles for small resolution devices should be at the last.

Here is my first try with the @media queries in JSFiddle (try to resize the page to see the magic):
http://jsfiddle.net/syedgakbar/anLwH/embedded/result/

As you can see in the above demo page, as you resize the page, the background color changes, plus also the Vitz/Yaris colors changes too. And at low resolution, you apply the stretch to background to cover the available space. All this is done with no JavaScript and only using the CSS3 @media queries.

If you want to learn more about @media queries, then I would recommend the following article:
Introduction to media queries

I will hopefully by adding this to my site as well, and hope to learn a lot from that experience. You are welcome to share your comments as well.

Tags: CSS, Flexible, Layout, Media, Queries

This entry was posted on Sunday, September 2nd, 2012 at 10:29 pm and is filed under HTML & CSS. You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.