Media features

Most media features can be prefixed with min- or -max to express minimum and maximum constraints. With the features below height, width and resolution can be used with the min- and max- prefixes.

• height: Viewport height

• width: Viewport width

• resolution: Pixel density of the output device

• orientation: Orientation of the viewport

width is used to style conditionally based on the width of the viewport (browser window). This must be specified with a number and a measurement for length (px, em).

/* Exact width */
@media (width: 300px) {
    ...
}

/* Viewport width at least */
@media (min-width: 600px) {
    ...
}

/* Viewport width at most */
@media (max-width: 1200px) {
    ...
}

height is used to style conditionally based on the height of the viewport (browser window). This must be specified with a number and a measurement for length (px, em).

/* Exact width */
@media (height: 300px) {
    ...
}

/* Viewport width at least */
@media (min-height: 600px) {
    ...
}

/* Viewport width at most */
@media (max-height: 800px) {
    ...
}

resolution is used to style conditionally based on the pixel density of the output device.

@media print and (min-resolution: 300dpi) {
    ...
}

portrait is used to style conditionally based on the orientation of the viewport. It can either be portrait or landscape.

@media (orientation: portrait) {
    ...
}

There is also a lot of other media features, but they are less important and used. You can read about them at Mozilla Developer Network.