Responsive UI using CSS Media Query

Contributed by Vinci Rufus on 1 May 2012

A Website or User Interface is said to be responsive when it is able to change its layout depending on what device it is being viewed on. The logical approaches, is to first identify the device or screen width and based on that reposition or even remove certain blocks of content so that it is optimized for viewing. While there are various techniques to detect the screen resolution and re-arrange the content blocks, the easiest and most commonly used technique is by taking advantage of one of CSS3 s new feature called Media Query. CSS Media Query is where you can define a set of CSS rules which would apply when the media query condition is satisfied. nav{ background: #333; border-radius:8px; padding: 3 px 5px; min-height:35px; } @media screen and (min-width: 480px) { nav{width:150px; float:left; margin:15px 0;} Neev Information Technologies Pvt. Ltd. www.neevtech.com sales@neevtech.com

in the code sample above youll notice the media query which states that if the screen width is 480px and above it would apply the CSS which would float the navbar and change the UI from a 1 column layout to a 2 column layout.

Visit us at Neevtech.com to know more about our offerings.

Neev Information Technologies Pvt. Ltd.

www.neevtech.com

sales@neevtech.com