Technologies such as CSS3 media queries are becoming increasingly important and all new websites should use them. The main reason is that visitors have certain expectations when viewing your site on everything from a desktop to a laptop to a netbook to a tablet to a handheld. They expect your site to maintain a high level of user experience satisfaction no matter how or where they see your site. This article shows some techniques for using CSS3 media queries.
CSS 2.1 supported some media types, but they were quite limited for developers. With the introduction of CSS3 they introduced types like max-width, device-width and orientation (portrait or landscape). Devices such as the iPad and Android (with at least 2.2 installed) will take advantage of these types.
The power of CSS3 is that it allows you to tailor different resolutions and devices without changing the content.
How to load your CSS:
Normal version
<link rel="stylesheet" media="screen" href="style.css" /
Query based version
<link rel="stylesheet" media="screen and (max-width: 480px)" href="style-landscape-phone.css" />
For sake of efficiency, it is better to place multiple styles for different browsers and sizes into a single style sheet.
Style Sheets Using Media Queries
I’d recommend taking after Twitter’s Bootstrap with just these media queries:
/* Landscape phones and down */
@media (max-width: 480px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Small desktop */
@media (min-width: 980px) and (max-width: 1199px) { ... }
/* Large desktop */
@media (min-width: 1200px) { ... }
Everything outside of any media query is applied to all devices, so your mail CSS should be outside of a media query. Everything inside a media query block extends and overrides what is available globally as well as styles for all smaller devices. Think of it as progressive enhancement for responsive design.
With this css code you should be able to created great responsive websites.