CSS Media Queries

Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse.

Media queries allow one to apply CSS rules based on the type of device / media (e.g. screen, print or handheld) called media type, additional aspects of the device are described with media features such as the availability of color or viewport dimensions.

General Structure of a Media Query

@media [...] {
 /* One or more CSS rules to apply when the query is satisfied */
}

A Media Query containing a Media Type

@media print {
 /* One or more CSS rules to apply when the query is satisfied */
}

A Media Query containing a Media Type and a Media Feature

@media screen and (max-width: 600px) {
 /* One or more CSS rules to apply when the query is satisfied */
}

A Media Query containing a Media Feature (and an implicit Media Type of "all")

@media (orientation: portrait) {
 /* One or more CSS rules to apply when the query is satisfied */
}

Deprecated Features Details