Reference

At-rules and descriptors

• @import
• @custom-media
• @media
  • any-hover
  • any-pointer
  • aspect-ratio
  • color
  • color-gamut
  • color-index
  • device-aspect-ratio
  • device-height
  • device-width
  • display-mode
  • dynamic-range
  • forced-colors
  • grid
  • height
  • horizontal-viewport-segments
  • hover
  • inverted-colors
  • monochrome
  • orientation
  • overflow-block
  • overflow-inline
  • pointer
  • prefers-color-scheme
  • prefers-contrast
  • prefers-reduced-data
  • prefers-reduced-motion
  • prefers-reduced-transparency
  • resolution
  • scan
  • scripting
  • update
  • vertical-viewport-segments
  • video-dynamic-range
  • width

The CSS media queries level 5 module also introduces the environment-blending, nav-controls, and video-color-gamut @media descriptors. Currently, no browsers support these features.

Data types and operators

• <media-types>
• <media-features>
• <resolution>
• Logical operators

Glossary terms

• media
• media query

Guides

Using media queries

Introduces media queries, their syntax, and the operators and media features used to construct media query expressions.

Learn: Media query fundamentals

Introduction to media queries and approaches for using them to create responsive designs.

Testing media queries

Describes how to use media queries in your JavaScript code to determine the state of a device, and to set up listeners that notify your code when the results of media queries change (such as when the user rotates the screen or resizes the browser).

Using media queries for accessibility

Learn how media queries can help users understand your website better.

Printing

Tips and techniques for helping improve web content printer output.

Responsive images

Learn how to use media queries with sizes to implement responsive image solutions on websites.

• CSS containment module
  • @container at-rule
  • Using container queries
  • Using size and style container queries
• CSS conditional rules module
  • @supports at-rule
  • Using feature queries
• CSS environment variables
  • env() function
• CSS paged media module
  • @page at-rule
• CSS object model module
  • MediaQueryList interface
    • matches property
    • media property
    • change event
  • MediaList interface
    • mediaText property
  • MediaQueryListEvent object
• Device Posture API
  • device-posture descriptor
• HTML
  • sizes attribute for <img>, <link>, and <source> for <picture>
  • media attribute for <link>, <source>, and <style> HTML
  • <meta name="viewport">
• SVG media attribute

Specifications

See also

• Container queries
• Using the srcset and sizes attributes
• CSS paged media
• Use @supports to apply styles that depend on browser support for various CSS technologies.