Combining media queries
It's also possible to string multiple expressions together. For example, let's extend one of our prior examples and also limit the file to devices that have a viewport greater than 800 pixels.
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px)" href="800wide-portrait-screen.css" />
Further still, we could have a list of media queries. If any of the listed queries are true, the file will be applied. If none are true, it won't. Here is an example:
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px), projection" href="800wide-portrait-screen.css" />
There are two points to note here. Firstly, a comma separates each media query. Secondly, you'll notice that after projection, there is no trailing and/or feature/value combination in parentheses. That's because in the absence of these values, the media query is applied to all media types. In our example, the styles will apply to all projectors.
Tip
You should be aware that you can use any CSS length unit to specify media queries with. Pixels (px) are the most commonly used but ems (em) and rems (rem) are equally appropriate. For some further info on the merits of each, I wrote a little more on the subject here: http://benfrain.com/just-use-pixels
Therefore, if you want a break point at 800px (but specified in em units) simply divide the number of pixels by 16. For example, 800px could also be specified as 50em (800 / 16 = 50).
Media queries with @import
We can also use the @import feature of CSS to conditionally load style sheets into our existing style sheet. For example, the following code would import the style sheet called phone.css, providing the device was screen based and had a maximum viewport of 360 pixels:
@import url("phone.css") screen and (max-width:360px);
Remember that using the @import feature of CSS, adds to HTTP requests (which impacts load speed) so use this method sparingly.
Media queries in CSS
So far, we have included them as links to CSS files that we would place within the <head></head> section of our HTML and as @import statements. However, it's more likely we will want to use media queries within CSS style sheets themselves. For example, if we add the following code into a style sheet, it will make all h1 elements green, providing the device has a screen width of 400 pixels or less:
@media screen and (max-device-width: 400px) {
h1 { color: green }
}
First we specify we want a media query with the @media at-rule, then we specify the type we want to match. In the preceding example, we want to apply the rules enclosed only to screens (and not, for example, print). Then, inside parenthesis we enter the specifics of the query. Then like any CSS rule, we open the braces and write the required styles.
At this point it's probably prudent of me to point out that in most situations, you don't actually need to specify screen. Here's the key point in the specification:
"A shorthand syntax is offered for media queries that apply to all media types; the keyword 'all' can be left out (along with the trailing 'and'). I.e. if the media type is not explicitly given it is 'all'."
Therefore, unless you want to target styles to particular media types, just leave the screen and part out. That's the way we will be writing media queries in the example files from this point on.
What can media queries test for?
When building responsive designs, the media queries that get used most, usually relate to a device's viewport width (width). In my own experience, I have found little need (with the occasional exception of resolution and viewport height) to employ the other capabilities. However, just in case the need arises, here is a list of all capabilities that Media Queries Level 3 can test for. Hopefully some will pique your interest:
width: The viewport width.height: The viewport height.device-width: The rendering surface's width (for our purposes, this is typically the screen width of a device).device-height: The rendering surface's height (for our purposes, this is typically the screen height of a device).orientation: This capability checks whether a device is portrait or landscape in orientation.aspect-ratio: The ratio of width to height based upon the viewport width and height. A 16:9 widescreen display can be written asaspect-ratio: 16/9.device-aspect-ratio: This capability is similar toaspect-ratiobut is based upon the width and height of the device rendering surface, rather than viewport.color: The number of bits per color component. For example,min-color: 16will check that the device has 16-bit color.color-index: The number of entries in the color lookup table of the device. Values must be numbers and cannot be negative.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.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.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 withscan: progressivewhile a 1080i HD TV (the i part of 1080i indicates "interlaced") could be targeted withscan: interlace.grid: This capability indicates whether or not the device is grid or bitmap based.
All the preceding features, with the exception of scan and grid, can be prefixed with min or max to create ranges. For example, consider the following code snippet:
@import url("tiny.css") screen and (min-width:200px) and (max-width:360px);
Here, a minimum (min) and maximum (max) have been applied to width to set a range. The tiny.css file will only be imported for screen devices with a minimum viewport width of 200 pixels and a maximum viewport width of 360 pixels.
Note
Features deprecated in CSS Media Queries Level 4
It's worth being aware that the draft specification for Media Queries Level 4 deprecates the use of a few features (http://dev.w3.org/csswg/mediaqueries-4/#mf-deprecated); most notably device-height, device-width, and device-aspect-ratio. Support for those queries will remain in browsers but it's recommended you refrain from writing any new style sheets that use them.