An Introduction to CSS3 Media Queries

While HTML5 has been on everyone’s mind lately, the use of related technologies such as CSS3 media queries are becoming increasingly important as well. Visitors have certain expectations when viewing your site on everything from a desktop to a laptop to a netbook to a tablet to a handheld. They expect your site to maintain a high level of  user experience satisfaction no matter how or where they see your site. This article dives into methodologies and techniques for using CSS3 media queries.

CSS 2.1 supports several media types, which are also supported by CSS3: screen, print and handheld. CSS3 takes it a bit further and includes max-width, device-width, orientation (portrait or landscape) and even color. Newer devices such as the latest iPad and Android devices with at least 2.2 installed will take advantage of these types.

Android Devices and Media Queries

Certain Android hand held devices such as the HTC EVO, in conjunction with certain applications, can adjust the screen and font color depending on the amount of light in the room. One application that uses this light-sensor technology is the Pulse app, which is a news feed service that aggregates your favorite news services into a single screen or screens. If there is plenty of light in the room, or in bright daylight, the screen will have a white background with black font. If you are in a dark room, or out and about at night, then the background will go black and the font becomes white.

If you’re riding on the train during the morning commute and you go through a tunnel, you’ll see the app change it’s color scheme automatically. It can be really amazing to see it happen. Android uses this same light-sensor technology to adjust the volume of a ring tone. The phone will ring louder if it senses it is in a pocket or a purse, due to a lack of light, and it will ring a bit quieter if it detects light.   

In an ideal world, you want to create a media query that allows devices that can use CSS3 to display correctly, while browsers and computers that cannot take advantage of CSS3 to bypass it completely.

Sample CSS3 Media Query Code

Here’s an example of such a media query:

<link rel=”stylesheet” type=”text/css”
    media=”screen and (max-device-width: 480px)”
    href=”foureighty.css” />

This media query will trigger your foureighty style sheet if the visitor’s  browser is 480 pixels or less. In this manner, you can create different style sheets to accommodate for different orientations as well as screen sizes.

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.