Media queries and breakpoints

Media queries and breakpoints

Media queries can respond to viewport width, pointer capabilities, color scheme and reduced-motion preferences. Choose breakpoints where the design stops working rather than targeting specific device models.

Try it yourself

Change the example, run it, and explain the result in your own words. Then create one variation of your own.

Key idea

Use the example as a starting point, not something to memorize. Practise, inspect the result and make small improvements.