Responsive Design & Media Queries
A responsive website adjusts its layout depending on the visitor's screen size a phone, a tablet, a giant desktop monitor instead of forcing one fixed design onto every device. @media queries make this possible: @media (max-width: 600px) { .row { flex-direction: column; } } means 'ONLY apply this CSS rule when the browser window is 600 pixels wide or narrower' everything inside those curly braces is completely ignored on wider screens. The modern approach is called mobile-first: write your default CSS for small screens first (since it's the simplest layout), then use @media (min-width: ...) queries to progressively add complexity as screen size increases, rather than the reverse. Nearly every real website today combines flexbox or grid with media queries the layout system arranges things, and media queries adjust HOW they're arranged at different sizes, like switching a row into a stacked column on small screens.
Why this matters
- ·Media queries let one codebase serve phones, tablets, and desktops with an appropriate layout
- ·Mobile-first design forces you to prioritize essential content for the smallest screens first
- ·Combined with flexbox/grid, media queries can completely restructure a layout at different sizes
Common mistakes
- ·Designing desktop-first and only adding mobile styles as an afterthought often leads to a poor mobile experience
- ·Too many overlapping breakpoints make CSS hard to reason about and maintain
- ·Forgetting the viewport meta tag in HTML makes media queries behave incorrectly on real phones
Frequently asked questions
No media queries are a CSS at-rule that requires internal or external CSS; they cannot be written in a style attribute.
Practice questions
Question 1
Add a media query that stacks a flex row into a column below 500px width.
Question 2
Add a media query that changes text color on screens narrower than 400px.
Quick check
Just for this topic answer honestly, then check yourself.
1 / 10