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