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.
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.
|color||int||yes||bits per color component|
|color-index||int||yes||number of entries in color lookup table|
|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:
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."
The screenshot below shows the Jazz Calendar site at a browser width of 800 pixels. Note that the graphic background shows:
The next screenshot shows the Jazz Calendar site at a browser width of 765 pixels. The graphic background is no longer visible: