User guide
Media queries apply styles based on viewport width. The mobile-first approach favors min-width to add styles as the screen grows.
- Common breakpoints: 480px, 768px, 1024px, 1280px.
- Prefer
emfor breakpoints that follow user zoom.
FAQ
min-width or max-width?
min-width builds from smallest to largest (mobile-first); max-width does the reverse. Mixing both complicates maintenance.
Which breakpoints should I choose?
Match them to your content rather than to devices. Values like 600, 900 and 1200px cover most cases.