CSS3 Media Queries

Contact Us or call 1-877-932-8228
CSS3 Media Queries

CSS3 Media Queries

Among the new features offered as part of CSS3, media queries are easily the most useful to us as designers and developers of mobile sites. 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 screen 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
orientation "portrait" or "landscape" no orientation ("portrait" or "landscape") of the device
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

Let's look at a simple example of media queries. Open WhatIsjQueryMobile/Demos/mediaquery/index.html in a desktop browser; open up the same file and WhatIsjQueryMobile/Demos/mediaquery/style.css in a file editor to check out the code.

When the browser is wider than 768 pixels, the page renders with the two columns floated left and right. The red main column (an article inside of a section) occupies about two-thirds of the page, at left. The blue right sidebar column (an aside) sits to the right.

media query demo - wide browser

When we drag the browser to a width narrower than 768 pixels, the design changes:

  1. Both columns fill the width of the container element, instead of floating left and right;
  2. The main column's background changes to gray;
  3. The background of the sidebar column, now at bottom, changes to green.

Here's a screenshot of the narrow-browser rendering:

media query demo - narrow browser

Code Sample:

WhatIsjQueryMobile/Demos/mediaquery/index.html
<!doctype html>
<html>
<head>
  <title>Media Queries</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="container">
  <header>
    <h1>Site Title</h1>
    <nav>
      <ul>
        <li><a href="#">link 1</a></li>
        <li><a href="#">link 2</a></li>
        <li><a href="#">link 3</a></li>
      </ul>
    </nav>
  </header>
  <section>
    <article>
      <h1>Page Title</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Content content content</p>
    </article>
  </section>
  <aside>
    <h2>Sidebar</h2>
    <p>Sidebar info goes here</p>
  </aside>
  <footer>Footer content here</footer>
</div>
</body>
</html>

Code Explanation:

The HTML page contains an article wrapped by a section; an aside wraps the sidebar content.

Code Sample:

WhatIsjQueryMobile/Demos/mediaquery/style.css
#container {
	width:80%;
	margin:0 auto;
}
section {
	float:left;
	width:55%;
	padding:2% 5%;
	background:#f00;
}
aside {
	float:right;
	width:25%;
	padding:2% 5%;
	background:#00f;
}

@media screen and (max-width: 768px) {
	section {
		float:none;
		width:90%;
		padding:5%;
		background:#ccc;
	}
	aside {
		float:none;
		width:90%;
		padding:5%;
		background:#0f0;
	}
}

footer {
	padding:5%;
	clear: both;
}

Code Explanation:

Unlike our earlier example, we employ a CSS stylesheet in this example. The media query dictates that "for viewing on a screen and at a maximum browser width of 768 pixels" the page should:

  1. Unfloat the section element;
  2. Set the width of the section element to 90%;
  3. Set the background color of the section to gray;
  4. Unfloat the aside element;
  5. Set the width of the aside element to 90%;
  6. Set the background color of the aside to green.
Next