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.