A media query is a Boolean logical expression (either true or false) used in conjunction with one of the media types. It tests one feature or more of the output device and, if the expression is true, applies the subsequent specified style rules.
@media media type and (criteria targeted) {
/*rules that will apply only to the devices fitting those criteria*/
}
/*OR-*/
<link rel="stylesheet" type="text/css" media="media type and (criteria
targeted)" href="specific_stylesheet.css" />CSS 2.1 Media Queries
Serving different styles for different media types is not new to CSS3. From CSS2.1, you could target several media types and specify how documents are presented in the media types as displayed below.
Media types in CSS2.1
| Media Type | Description |
|---|
screen | For color computer screens |
print | For printed material |
aural/speech | For speech synthesizers |
braille | For Braille tactile feedback devices |
embossed | For paged Braille printers |
tty | For teletypes, terminals, and other devices with limited display capabilities |
projection | For projected presentations |
tv | For televisions and television-like devices |
all | For all the media types listed above |
handheld | Intended for handheld devices (typically, devices with small screens and limited bandwidth) |
You can target different media types in two ways: Use the
@media or @import rules within the style sheet itself as follows:
snippet
@import url("screenStyles.css") screen;
@media print {
/* style sheet for print goes here */
}You can get the same result within the web document by using the <link> tag, specifying the target media of an external style sheet.
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
As stated by the W3C specification, the screen media type was meant for desktops and laptop computers and the media type used to target mobile devices was the handled.
To define different styles for each of those types of devices, desktops, and mobile devices, you just attach different style sheets like this.
snippet
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css">
Or, if you want to attach just a single style sheet, you do so as follows
snippet
@media screen {
/* rules specific for screen devices */
}
@media handheld {
/* rules specific for handled devices */
}Features of the output device that can be tested in CSS3 using media queries.
| Feature | Description | Value Min/Max | Prefixes |
|---|
width | Width of the display area of the output device | Integer expressing pixels, cm or em depending on the media type (for example, width:300px). | Yes |
height | Height of the display area of the output device. | Integer | Yes |
device-height | Height of the rendering surface of the output device | Integer | Yes |
device-width | Width of the rendering surface of the output device | Integer | Yes |
orientation | Orientation of the output device | Portrait or landscape | No |
aspect-ratio | Ratio of the width to the height | Integer/integer (for example,16/9). | Yes |
device-aspect-ratio | Ratio of the device width to the device height | Integer/integer (ex:16/9). | Yes |
color | The number of bits per color component of the output device | Integer. If there’s no color, the value is 0. | No |
color-index | Number of entries in the color lookup table of the output device | Integer | No |
monochrome | Number of bits per pixel in a monochrome frame buffer | Integer | No |
resolution | Density of pixels of the output device | Integer value in dots per inch (dpi)—for example, resolution: 300dpi). | Yes |
scan | Scanning process of TV output devices | Progressive or interlace. | No |
grid | Query whether the output device is grid or bitmap | 0 for grid; 1 for bitmap. | No |
■ Media query with the logical operator and:
@media only screen and (device-width:900px) {
/* rules to be applied */
}This code example targets screen devices only, with an exact device width of 900 pixels.
Points to remember
If you decide to use different external style sheets depending on your media queries, keep in mind that browsers, including mobile ones, will load all the style sheets whether they’re needed or not for the current output device and scenario. In terms of performance and to limit the number of HTTP requests, it’s usually better to have all your styles and media queries in a single style sheet.
Note: Older browsers ignore the. only keyword and won’t read this kind of query.
■ Media query with the logical operators and and not:
@media screen and (not device-width:900px) {
/* rules to be applied */
}This code example targets any screen for which the exact device width is not 900 pixels.
■ Media query with the equivalent of the OR operator:
@media projector and (color), screen and (color) {
/* rules to be applied */
}This code example targets a projector or a screen that has color capabilities.
■ Media query with the and operator, the min– prefix, and the equivalent of the OR operator:
@media screen and (min-width:900px), print, tv {
/* rules to be applied */
}This code example targets the screen media type for a screen with a minimum display width of 900 pixels, and/or print devices (setting style rules for a printed version of your web content), and/or TV. In the preceding examples, the media queries are written as they would appear inside a single style sheet.
