CSS3 media queries

Media queries are an extension to HTML5 that allows features of a user’s display to determine the CSS delivered to the device, as defined by the CSS3 Module. device in portrait orientation with a viewport width of 320px can be detected and given different styles compared to a desktop device with a viewport width of 1024px. Conventionally, the different styling would normally be restricted to layout, backgrounds, and images; in essence, a completely new set of styles can be delivered.
As in media types, there are three ways to invoke media-query-dependent styles. First of all, as stylesheets in the link element of HTML or XHTML:

<link rel="stylesheet" type="text/css" media="all and
  (color)" href="/style.css"> 

Secondly, in XML:

<?xml-stylesheet media="all and (color)" rel="stylesheet"
  href="/style.css" ?>

And finally, in CSS stylesheets using @import

  rules:

@import url("/style.css") all and (color);

Or using @media rules:

Multiple Style Sheets Using Media Queries

You don’t have to use multiple style sheets to accommodate for all the different screen sizes and browsers that your visitors might use. However, if you prefer a different style sheet for each design, then you can use the following code as an example to do so:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
<link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" />
<link rel="stylesheet" media="print" href="print.css" />

For sake of efficiency though, it might be better to place multiple styles for different browsers and sizes into a single style sheet. This eliminates the need for multiple requests for several different sheets. Here are a couple of more examples.
@media screen and (min-width: 600px) {
     .sixhundredminwidthclass {
          width: 30%;
          float: right;
     }
}

and

@media screen and (max-width: 600px) {
     .sixhundredmaxwidth {
          clear: both;
          font-size: 1.3em;
     }
}

You might notice that the very first example used max-device-width and the other two examples used min-width and max-width. It’s important to define the difference between the two. Min-width and max-width is specific to not only the screen size but the browser size. For example, a visitor on a desktop or laptop might resize their browser, which could then trigger a different media query and the appropriate style would then be applied. In contrast, max-device-width and min-device-width applies specifically to the device, which would work best with handheld devices.