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 */
}