The @media Rule

A @media rule can include one or more media query expressions, separated by commas, each consisting of a media type, one or more parenthesized media feature expressions, or both, separated by the conjunction and:

@media media-type and (media-feature:value) { ... }

The styles inside the braces will only be applied in situations that match the media query.

Media Types in Media Queries

Continuous media types

• @media braille { ... }
• @media screen { ... }
• @media speech { ... }
• @media tty { ... }

Hybrid (continuous or paged) media types

• @media all { ... } (default)
• @media handheld { ... }
• @media tv { ... }

Paged media types

• @media embossed { ... }
• @media print { ... }
• @media projection { ... }

These media query values can also be used in the @import CSS Rule, the media attribute of the <style> tag and the media attribute of the <link> tag.

Media Features in Media Queries

width, height

device-width, device-height

orientation

aspect-ratio

device-aspect-ratio

color

color-index

monochrome

resolution

scan

grid