Code with Media Query

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 TypeDescription
screenFor color computer screens
printFor printed material
aural/speechFor speech synthesizers
brailleFor Braille tactile feedback devices
embossedFor paged Braille printers
ttyFor teletypes, terminals, and other devices with limited display capabilities
projectionFor projected presentations
tvFor televisions and television-like devices
allFor all the media types listed above
handheldIntended 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.

FeatureDescriptionValue Min/MaxPrefixes
widthWidth of the display area of the output deviceInteger expressing pixels, cm or em depending on the media type (for example, width:300px).Yes
heightHeight of the display area of the output device.IntegerYes
device-heightHeight of the rendering surface of the output deviceIntegerYes
device-widthWidth of the rendering surface of the output deviceIntegerYes
orientationOrientation of the output devicePortrait or landscapeNo
aspect-ratioRatio of the width to the heightInteger/integer (for example,16/9).Yes
device-aspect-ratioRatio of the device width to the device heightInteger/integer (ex:16/9).Yes
colorThe number of bits per color component of the output deviceInteger. If there’s no color, the value is 0.No
color-indexNumber of entries in the color lookup table of the output deviceIntegerNo
monochromeNumber of bits per pixel in a monochrome frame bufferIntegerNo
resolutionDensity of pixels of the output deviceInteger value in dots per inch (dpi)—for example, resolution: 300dpi).Yes
scanScanning process of TV output devicesProgressive or interlace.No
gridQuery whether the output device is grid or bitmap0 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.
Related Tutorial