CSS3 : Media Queries

We can use Media queries to port our website for different resolutions. Media query is very useful tool when website are viewed on a huge range of devices. With very little change, you can make an existing website mobile and tablet compliant.

As a HTML developer, if i had to build multiple version of each page to cater to each screen, i can easily do this by media query.

[html]
@media all and (min-width :321px){
#container{width:321px;height:179px;}
#header{height:40px;padding:2px 0px 3px 3px;}
#container .left-panel{width:245px;}
#container .right-panel{width:76px;overflow:hidden;height:179px;}
#header .logo{width:37px;}
}
[/html]

[html]
@media all and (min-width :480px){
#container{width:480px;height:268px;}
#header{height:58px;padding:4px 0px 4px 4px;}
#container .left-panel{width:368px;}
#container .right-panel{width:112px;overflow:hidden;height:268px;}
#header .logo{width:54px;}
}
[/html]

In the example above we are targeting two different width of mobile devices. In first we have min-width 321px and in
second min-width is 480px. Accordingly we have different settings of their inner div’s which you can see above. If width of mobile device is between 321px to 479px, the first media query would be applied and if width of mobile device is more than 479px than second media query will be applied.

Thus you can create similar media queries and target various width of mobile devices.

Hope it helps ! 🙂

Kapil Chotwani

kapil@intelligrape.com