Media Query Usage Syntax

When used inside a CSS file ?

A media query is composed of a media type and can include one or more media features that evaluate to true or false. (The mediatype is optional, if omitted, it will be set to all. However, if you use not or only, you must also specify a mediatype.) Whenever a media query is evaluated to be true, the corresponding style rules inside it will be applied.

1
2
3
4
5
6

@media not|only mediatype and (media_feature_1) and (media_feature2) {
  CSS-Code-Line1;
  CSS-Code-Line2;
  CSS-Code-Line3;
  CSS-Code-Line4;
}

When used outside a CSS file ?

An alternative way of using the meidia query on the html file, below are some examples:

1
2
3
4

<link rel="stylesheet" media="print" href="print.css">
<link rel="stylesheet" media="screen" href="screen.css">
<link rel="stylesheet" media="screen and (min-width: 480px)" href="example1.css">
<link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="example2.css">

Syntax Detail

Operand

Meaning of the not, only, and and keywords:

ValueDescription
notThis keyword inverts the meaning of an entire media query.
onlyThis keyword prevents older browsers that do not support media queries from applying the specified styles. It has no effect on modern browsers.
andThis keyword combines a media type and one or more media features.

Media Type

ValueDescription
allUsed for all media type devices
printUsed for print preview mode
screenUsed for computer screens, tablets, smart-phones etc.

Media Feature

ValueDescription
orientationOrientation of the viewport. Landscape or portrait
max-heightMaximum height of the viewport
min-heightMinimum height of the viewport
heightHeight of the viewport (including scrollbar)
max-widthMaximum width of the viewport
min-widthMinimum width of the viewport
widthWidth of the viewport (including scrollbar)

Reference