CSS3 Tutorial: media queries

Media queries

In CSS2, we had the opportunity to link separate stylesheets for the different media types, such as the screen and print media types, to a web page. CSS3 goes one step further with the so-called media queries. Media queries are expressions, which you can add to a media type, indicate that certain CSS rules only apply to devices that meet certain conditions mentioned in the media query. For example you can design separate CSS rules or separate CSS style sheets (thus optimizing your design) for large screens (desktops, laptops), or for small screens of mobile phones, smartphones and tablets. Below an example of how a media query could look out. The significance of this media query is that in browser screens with a horizontal resolution of 700 px (tablet) or less the background color of all DOM elements with class = "foo" is red (# ff0000).

@media screen and (max-width: 700px) {
  .foo {
      background: #f16529;
   }   
} 

If however you want to link an dedicated external stylesheet (example.css) for these devices, you write the following in the <head> section of your HTML document :

<link rel="stylesheet" media="screen and (max-width: 700px)" href="example.css" />k

Browser support

Example 1: media query which renders a background color of an element <div> depending on the type of screen:

Open the demo-page and see what happens when you resize the browser window from large to very small

The CSS

.container {
  border: solid 1px #666; 
  padding: 5px 10px;
  margin: 40px;
}  

@media screen and (max-width: 600px) {
  .foo {
  background: #11a456;
  color:#000;
  }
}

@media screen and (min-width: 900px) {
  .foo2 {
  background: #00f;
  color:#fff;
  }
}  

/* min-width en max-width */
@media screen and (min-width: 600px) and (max-width: 900px) {
  .foo3 {
  background: #f16529;
  color:#fff;
  }
}

/* max device width */
@media screen and (max-device-width: 480px) {
  .iphone {
  background: #aaa;
  color:#fff	;
  }
}

The HTML code

    <div  class="foo container">
	This element will turn green when the browser window is smaller than 600px.
	</div>
    <div  class="foo2 container">
	This element will turn blue when the browser window is larger than 900px.
	</div>
    <div  class="foo3 container">
	This element will turn red when the browser window is larger than 600px but smaller than 900px.
	</div>
    <div  class="foo4 container">
	This element is gray as the screen of a mobile device is smaller than 480px.
	</div>

Media queries are in the first place instrument to test for capabilitiies or features of a device (not directly for the kind of device) in order to add CSS styles based upon these tests. Lets look at some the features media queries can test for. All the features below, with the exception of scan and grid, may be prefixed with min or max

1. The viewport width

@media screen and (min-width: 900px) {
	.foo {
	background: #00f; color:#fff;
	}
}
or
<link rel="stylesheet" media="not screen and (orientation: landscape)"
href="portrait-screen.css" />

2. viewport height

@media screen and (max-height: 600px) {
  .foo {
  background: #00f;
  }
}

3. device-width

What is the difference between width and device-width? Device-width refers to the the screen resolution of the device. If your screen's resolution is 1440 x 900 then the screen is 1440 pixels across, so it has a device-width of 1440px. Most mobile phones have a device-width of 480px or lower, including the popular iPhone 4 (with device-width: 320px), despite it technically having a 640 x 960 resolution. This is due to iPhone 4's retina display, which tucks away two device pixels into each CSS pixel on the screen. This is also true for the Ipad 3; its reported device-width is 768px although its actual screen resolution is 1536px x 2048px. In general width is more versatile when it comes to creating responsive webpages, though device-width is useful when you wish to specifically target mobile devices (and not desktops with a small browser window for example)

@media screen and (device-width: 1440px) {
  .foo2 {
  background: #00f;
  }
}

4. device-height

@media screen and (device-height: 900px) {
  .foo2 {
  background: #00f;
  }
}

5. orientation

Is the device in portrait or in landscape orientation?

@media not screen and (orientation: landscape) {
  .foo2 {
  background: #00f;
  }
}

6 aspect-ratio

The ratio of the viewport width and height. A 16:9 widescreen display has an aspect-ratio of 16/9.

@media screen and (aspect-ratio: 16/9) {
  .foo2 {
  background: #00f;
   }
}

7. device-aspect-ratio

The ratio of the device-width and device-height. A 16:9 viewport display has a device-aspect-ratio of 16/9.

@media screen and (device-aspect-ratio: 16/9) {
  .foo2 {
  background: #00f;
   }
}

8. color

The number of bits per color component. For example, min-color: 16 will check that the device has 16-bit color.

@media screen and (min-color:16) {
  .foo2 {
  background: #00f;
   }
}

9. color-index

The number of entries in the color lookup table of the device. Values must be numbers and cannot be negative.

@media screen and (min-color:16) {
  .foo2 {
  background: #00f;
   }
}

10. monochrome

This capability tests how many bits per pixel are in a monochrome frame buffer. The value would be a number (integer), for example monochrome: 2, and cannot be negative.

@media screen and (monochrome: 2) {
  .foo2 {
  background: #00f;
   }
}

11. resolution:

This capability can be used to test screen or print resolution; for example, min-resolution: 300dpi. It can also accept measurements in dots per centimeter; for example, min-resolution: 118dpcm.

@media screen and (min-resolution: 300dpi) {
  .foo2 {
  background: #00f;
   }
}

12. scan:

This can be either progressive or interlace features largely particular to TVs. For example, a 720p HD TV (the p part of 720p indicates "progressive") could be targeted with scan: progressive whilst a 1080i HD TV (the i part of 1080i indicates "interlaced") could be targeted with scan: interlace.

@media screen and (scan: progressive) {
  .foo2 {
  background: #00f;
   }
}

13. grid:

This capability indicates whether or not the device is grid (like for example a TTY terminal or a phone display with only one font) or bitmap based. If the device is grid-based the value is 1.  Otherwise it is zero.

@media handheld and (grid) and (max-width: 15em) {
  .foo2 {
  background: #00f;
   }
}

Leave a comment