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;
     }
}