Building responsive web design using CSS3 Media Queries!

With the mobile devices growing in number, web development has become a little more complex. People now access Internet from tablets, smartphones, and other mobile devices, which means as a developer you need to cater to different screen sizes/devices. Earlier we might have relied on fixed-width web page layouts, which certainly would result in a bad user experience on different screen sizes.

One of the approaches used by web developers is to create a separate standard html and mobile sites (xyz.com and m.xyz.com). This may lead into complications as you have to handle separate code bases and keep them synchronized. Moreover mobile browsers are equally capable and they also can handle complex rendering.

What is Media Query?

CSS3 Media query lets you know the capability of the device rather than telling you the type of the device. You can use Media Queries for checking: height and width(of the browser window), device height and width, orientation(landscape or portrait), resolution of the screen. CSS2 lets you specify stylesheets for specific media such as screen or paper. CSS3 adds media queries to make this even more efficient. You can add expressions to media type to check for various conditions and render different stylesheets based on the result. The code below let’s me query the browser screen size, and based on the result I would specify the appropriate stylesheet. This can be used in the CSS file.

You can even specify separate stylesheets for different resolution. To add a separate stylesheet for a smaller device, you can use the following as well in the HTML.

CSS3 media query lets you implement "Responsive Design". Media Queries are nothing but expressions which you need to put in your CSS code, this checks for certain conditions based on which you can specify a specific stylesheet! So you can produce a fluid layout based on the screen sizes. You can render different layouts for different screen sizes.

You can also query for the orientation of the screen, aspect ratio, screen color, etc. using media queries. You can find the CSS3 Media Query documentation here.

 

Below are some screenshots of a sample Dashboard built by me using Media Query. The idea is to show the fluid layout using media queries on different screen sizes.

1280 X 720

 

800 X 600

 

640 X 480

 

480 X 640 (Target Device: mobile screens(Portrait). Utilizing the list view!)

 

You can access another sample demonstrating media query online here. Change the browser screen width and see the magic of media queries!

Is CSS3- Media Query supported by all browsers?

Most of the modern browsers support CSS3. I say most as I have not tested this on all browsers. I found a website which lists multiple browsers that support CSS3 Media Queries here.
In case your target browser does not support CSS3 Media queries, you still can utilize this feature by using a jQuery Plugin here. This script adds basic media queries support to older browsers.

Summary

Fluid grids, scalable images, and media queries are most important ingredients for responsive web design. Rather than providing a device specific experience, we may use media queries to enhance our end user experience by providing different viewing contexts.

You can download the media query samples locally and play around with it. To download samples click here.

 

Cheers,
Abhishek
@narainabhishek