Multiple Style Sheets Using Media Queries

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.

iPad and Android Orientation Code

There is specific code for both iPads and Android devices for handling orientation. For Android, if you use elements with display set to box, you can order the child nodes for either vertical or horizontal. If no orientation is provided, the box defaults to vertical. Here’s a code example on how to handle that:

#androidorientation {
    display: -webkit-box;
-webkit-box-orient: horizontal;
    display: -moz-box;
    -moz-box-orient: horizontal;
}

The iPad uses the orientation property. Here are examples for both landscape and portrait:

@media screen and (orientation: landscape) {
     .applelandscape {
          width: 30%;
          float: right;
     }
}

@media screen and (orientation: portrait) {
     .appleportrait {
          clear: both;
     }
}

These last two examples only work for the iPad. So, you might only want to use it if you are designing specifically for an iPad application. Otherwise, it’s probably best to stick with max-device-width and min-device-width.

Hopefully, this article will start you thinking about how best to use media queries and provides enough examples to head you down the right path.