Polypane

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.

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
Polypane screenshot
By using our site you agree to our privacy policy and disclaimer