Introduction to Media Queries (Step1 of RWD)

What is media queries?

CSS2 allows you to specify stylesheet for specific media type such as screen or print.

Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets.

For example, it's been common practice for years to use a separate style sheet for printing web pages by specifying media="print" . Media queries take this idea to the next level by allowing designers to target styles based on a number of device properties, such as screen width, orientation, and so on.

Need of media queries ?

The rapid spread of mobile devices has turned the world of web design upside down. Users no longer view web content only on traditional desktop systems, but are increasingly using smartphones, tablets, and other devices with a wide range of dimensions. The challenge for web designers is to ensure that their websites look good not only on a big screen, but also on a tiny phone and everything in between.

Example of media queries uses :

1.Max Width

a)use in css file

@media screen and (max-width: 500px) {
  .className {
     background: #FFFFFF;
   }
 }

b)use saparate css file for the devices whose width within 500px.

<link rel="stylesheet" media="screen and (max-width: 500px)" href="small.css" />

2.Min Width

a)use in css file

@media screen and (min-width: 500px) {
  .className {
     background: #FFFFFF;
   }
 }

b)use saparate css file for the devices whose width within 500px.

<link rel="stylesheet" media="screen and (min-width: 500px)" href="small.css" />

3.Multiple Media Queries

You can combine multiple media queries. The following code will apply if the viewing area is between 500px and 800px.

@media screen and (min-width: 500px) and (max-width: 800px) {
       .className {
          background: #FFFFFF;
          }
     }

4.Device Width

This is the most important and usefull things.Because the different device has different width.So we can use different css files for different device using the Device Width property.

@media screen and (max-device-width: 600px) {
         .className {
             background: #FFFFFF;
          }
    }

Now for I give some example of particular divice.Like -

For iPhone 4

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

For iPhone 5

@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {

/* iPhone 5 or iPod Touch 5th generation */

}

For iPad

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />

In next blog I will discuss about more tools and techniques of responsive web design.Follow this blog to get updated about design stuff.

Responsive Web Design (RWD) :

What is responsive design?

Responsive Web Design (RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

In practical sciario, The changing landscape of web browsers meant that users expectations also changed; people expected to be able to browse the web on their phones just as easily as they browse the web on a desktop computer. So, in response to this (if you’ll excuse the pun) the web design community started creating mobile versions of their websites. In hindsight, this wasn’t really the way forward, but at the time it seemed like a reasonable idea. Every website would have their normal ‘desktop’ version of their site, and as a bonus, a ‘mobile’ version.

Example of responsive design :

Need of responsive design?

Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the next five years, we’ll likely need to design for a number of additional inventions.

In next blog I will discuss about the various tools and techniques of responsive web design.Follow this blog to get updated about design stuff.