Targeting Widths and Devices with CSS3 Media Queries

Contact Us or call 1-877-932-8228
Targeting Widths and Devices with CSS3 Media Queries

Targeting Widths and Devices with CSS3 Media Queries

Our Jazz Calendar site is more and more flexible: we've used a percentage-based layout to scale the site independent of the browser window's size, and we've applied CSS to scale images and other fixed-width elements. But the design still doesn't hold up when the browser window gets really narrow: elements squash together, some text might need to scale or pad differently, etc. And we've not yet addressed the specific needs of users accessing our site on a mobile device - even a scaled-down version probably won't work too well on a phone.

Jazz Calendar site breaks at narrow browser width

It would be nice not just to scale the site, but to make qualitative changes to the design based on the inherent properties of the device being used to view it, and also to adjust the design at specific browser-window widths. To address this issue, we turn to the media query.

You may already be familiar with CSS media types - a CSS2 specification that offered a way to include different stylesheets based on the media type (screen, print, etc.) being employed. A print-specific stylesheet, for example, might present a page without background images, with a print-friendly font face, and with margins appropriate for printing.

CSS3 extends this concept with the media query - a way to apply CSS rules selectively based on both the type of media and the physical properties of the device (browser, phone) being used to access the page.

Each media query comprises a media type (e.g., "screen") and zero or more logical expressions - a condition evaluating to true or false based on the conditions of particular media features. We can test our user's device for viewport width, device width, orientation ("portrait" or "landscape"), and other features.

Media Query Features
Feature Possible Values Min/Max? Explanation
color int yes bits per color component
color-index int yes number of entries in color lookup table
device-aspect-ratio int/int yes aspect ratio
device-height length (pixels) yes height of the output device
device-width length (pixels) yes width of the output device
grid int no true for a grid-based device
height length (pixels) yes height of the rendering surface
monochrome int yes bits per pixel in a monochrome frame buffer
resolution "dpi" or "dpcm" yes resolution
scan "progressive" or "interlaced" no scanning process of "tv" media types
width length (pixels) yes width of the rendering surface

Consider a revised version of the Jazz Calendar home page: open MediaQueries/Demos/noborder.html and MediaQueries/Demos/css/noborder.css in your file editor. Employing the min-width query, we create a page where:

  1. The graphic border between the two columns shows only when the browser is at least 768px wide.
  2. The left-column gig listings line up two-across when the browser is wider than 768px; one-across when narrower than 768px.

The key here are the media queries. The following code says "include the background image only if the width of the browser is at least 768 pixels."

@media screen and (min-width: 768px) { #main { width:93.75%; margin:0 auto 5.888888% auto; background: #c0cbd0 url('../images/bg_main.png') repeat-y 62.888888% 0; } }

The screenshot below shows the Jazz Calendar site at a browser width of 800 pixels. Note that the graphic background shows:

screenshot - Jazz Calendar site with border

The next screenshot shows the Jazz Calendar site at a browser width of 765 pixels. The graphic background is no longer visible:

screenshot - Jazz Calendar site without border

Next