HTML5 and CSS3 All-in-One For Dummies
Book image
Explore Book Buy On Amazon

HTML5 and CSS3 web developers can use AJAX to make a responsive mobile site. One way to make a site work well on multiple resolutions is to provide different CSS rules based on the detected media type.

CSS3 has a marvelous new feature called the media query, which allows you to specify a media type and determine various features of the display. You can use this specification to build a subset of the CSS that should be used when the browser detects a certain type or size of display.

Specify a media type

The @media rule allows you to specify what type of output the included CSS should modify. The most common media types are screen, print, speech, handheld, projection, and tv. There are more, but only print and screen are universally supported.

For example, the following code will specify the font size when the user prints the document:

@media print {
 body {
 font-size: 10pt;
 }
}

This CSS can be embedded into a normal CSS document, but it should typically be placed at the end of the document because it holds exceptions to the normal rules. You can place as much CSS code as you wish inside the @media element, but you should only put CSS code that's relevant to the specific situation you're interested in.

How to add a qualifier

In addition to specifying the media type, the @media rule has another very powerful trick. You can apply a special qualifying condition to the media.

image0.jpg

When the browser is wider than 500 pixels, you can see black text on a white background. But make the screen narrower, and you see something interesting.

image1.jpg

Normally you would use this trick to change the layout, but start with this simpler color-changing example. Here's the code for this simpler example:

<!doctype html>
<html lang="en">
<head>
 <title>narrowBlack.html</title>
 <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=false;">
 <style type = "text/css">
 body {
 color: black;
 background-color: white;
 }
 @media (max-width: 500px){
 body {
  color: white;
  background-color: black;
 }
 }
 </style>
</head>
<body>
 <h1>Qualifier Demo</h1>
 <p>
 Try resizing this page. When the page is
 wider than 500 pixels, it shows black text on a
 white background.
 </p>
 <p>
 When the page is narrower than 500 pixels, the colors
 reverse, giving white text on a black background.
 </p>
</body>
</html>

Here's how to build a page that adapts to the screen width:

  1. Build your site as usual.

    This is one place where that whole “separate content from layout” thing really pays off. The same HTML will have two different styles.

  2. Apply a CSS style in the normal way.

    Build your standard style in the normal way — for now, embed the style in the page with the

About This Article

This article is from the book:

About the book author:

Andy Harris taught himself programming because it was fun. Today he teaches computer science, game development, and web programming at the university level; is a technology consultant for the state of Indiana; has helped people with disabilities to form their own web development companies; and works with families who wish to teach computing at home.

This article can be found in the category: