Skip to main content

CSS media queries

The CSS media queries module enables testing and querying of viewport values and browser or device features, to conditionally apply CSS styles based on the current user environment. Media queries are used in the CSS @media rule and other contexts and languages such as HTML and JavaScript.

Media queries are a key component of responsive design. They enable conditional setting of CSS styles depending on the presence or value of device characteristics. It's common to use a media query based on {{Glossary("viewport")}} size to set appropriate layouts on devices with different screen sizes — for example three columns on a wide screen or a single column on a narrow screen.

Other common examples include increasing the font size and hiding navigation menus when printing a page, adjusting the padding between paragraphs when a page is viewed in portrait or landscape mode, or increasing the size of buttons to provide a larger hit area on touchscreens.

In CSS, use the {{cssxref("@media")}} at-rule to conditionally apply part of a style sheet based on the result of a media query. To conditionally apply an entire style sheet, use {{cssxref("@import")}}.

When designing reusable HTML components, you may also use container queries, which allow you to apply styles based on the size of a containing element rather than the viewport or other device characteristics.

Reference​

At-rules​

  • {{cssxref("@import")}}
  • {{cssxref("@media")}}

Descriptors​

  • {{cssxref("@media/any-hover", "any-hover")}}
  • {{cssxref("@media/any-pointer", "any-pointer")}}
  • {{cssxref("@media/aspect-ratio", "aspect-ratio")}}
  • {{cssxref("@media/color", "color")}}
  • {{cssxref("@media/color-gamut", "color-gamut")}}
  • {{cssxref("@media/color-index", "color-index")}}
  • {{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}}
  • {{cssxref("@media/device-height", "device-height")}}
  • {{cssxref("@media/device-width", "device-width")}}
  • {{cssxref("@media/display-mode", "display-mode")}}
  • {{cssxref("@media/dynamic-range", "dynamic-range")}}
  • {{cssxref("@media/forced-colors", "forced-colors")}}
  • {{cssxref("@media/grid", "grid")}}
  • {{cssxref("@media/height", "height")}}
  • {{cssxref("@media/hover", "hover")}}
  • {{cssxref("@media/inverted-colors", "inverted-colors")}}
  • {{cssxref("@media/monochrome", "monochrome")}}
  • {{cssxref("@media/orientation", "orientation")}}
  • {{cssxref("@media/overflow-block", "overflow-block")}}
  • {{cssxref("@media/overflow-inline", "overflow-inline")}}
  • {{cssxref("@media/pointer", "pointer")}}
  • {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}
  • {{cssxref("@media/prefers-contrast", "prefers-contrast")}}
  • {{cssxref("@media/prefers-reduced-data", "prefers-reduced-data")}}
  • {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}
  • {{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}}
  • {{cssxref("@media/resolution", "resolution")}}
  • {{cssxref("@media/scan", "scan")}}
  • {{cssxref("@media/scripting", "scripting")}}
  • {{cssxref("@media/update", "update")}}
  • {{cssxref("@media/video-dynamic-range", "video-dynamic-range")}}
  • {{cssxref("@media/width", "width")}}

[!NOTE] CSS media queries level 5 introduces five @media descriptors that have not been implemented: {{cssxref("@media/environment-blending", "environment-blending")}}, {{cssxref("@media/horizontal-viewport-segments", "horizontal-viewport-segments")}}, {{cssxref("@media/nav-controls", "nav-controls")}}, {{cssxref("@media/vertical-viewport-segments", "vertical-viewport-segments")}}, and {{cssxref("@media/video-color-gamut", "video-color-gamut")}}

[!NOTE] CSS media queries level 4 deprecated three @media descriptors: {{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}}, {{cssxref("@media/device-height", "device-height")}}, and {{cssxref("@media/device-width", "device-width")}}.

Data types and operators​

Glossary terms​

Guides​

  • Using media queries

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

  • Beginner's guide to media queries

    • : 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.

  • Learn: responsive images

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

Specifications​

See also​