With a media query you can define CSS that is only applied when your media query is applicable, like when your screen is at least 500px wide:

@media (min-width: 500px) {
  ...
}

This lets you write CSS that only makes sense when your page is a certain (minimum) width or height. For example to move from one column to two columns of text. When using media query values, it's best to use min-width exclusively and work mobile first.

You can test for many values in a media query, such as test for dark mode with @media (prefers-color-scheme: dark) and target the styling when the page is printed with @media print.

Want to learn more?

Our complete guide to CSS Media Queries will tell you everything there is to know about CSS Media Queries.

The responsive design glossary explains the many terms used in responsive design and development. It's a practical reference for anyone getting started with responsive design and development.

Get an overview of all responsive design terms

It's time to stop resizing your browser.

Create and test truly responsive websites and apps faster than ever before.

Learn more