Media Queries & Mobile-First

Adapt your layout to any screen size using media queries, and learn why 'Mobile-First' is the industry standard.

CSS6 min readConcept 25 of 43

What they are

Media queries are conditional CSS rules. They tell the browser: 'Only apply these styles if the screen matches a specific condition', such as being wider than 768 pixels.

They are the foundational technology behind Responsive Web Design, allowing a single website to seamlessly adapt its layout for phones, tablets, and desktop monitors.

Why it matters

Without media queries, a complex multi-column desktop layout will squish on a mobile phone, making the text unreadable and buttons impossible to tap.

Media queries allow you to fundamentally alter the layout—changing grids, hiding elements, or resizing typography—based entirely on the user's device size.

How it works (The Mobile-First Way)

1. **Mobile Default**: Write your base CSS outside of any media queries. Design for the narrowest screen first (usually a single column).

2. **Tablet Query**: Use @media (min-width: 768px) { ... } to add complexity (like a two-column grid) once the screen is wide enough to support it.

3. **Desktop Query**: Use @media (min-width: 1024px) { ... } to add even more complexity (like a three-column grid or sidebars).

Try it

Drag the slider to resize the simulated viewport. Watch how the CSS automatically applies different rules to completely change the layout from a mobile stack to a desktop grid!

Viewport Breakpoints

Simulate Viewport

Drag the slider to resize the simulated browser window.

Window Width

100%
45%100%
/* Mobile First (Default) */
.layout {
display: flex;
flex-direction: column;
}
/* Tablet Breakpoint */
@media (min-width: 600px) {
.layout {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
/* Desktop Breakpoint */
@media (min-width: 900px) {
.layout {
grid-template-columns: repeat(3, 1fr);
}
}
iNotice how we don't write display: grid in the base styles. It's Mobile-First! We start with a flex column, and only upgrade to a grid when the screen gets wide enough.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1What does a 'Mobile-First' CSS strategy mean?
  2. 2Which media query targets screens that are at least 1024px wide?
  3. 3If you have `.card { background: blue; }` and `@media (min-width: 800px) { .card { background: red; } }`, what color is the card on a 1000px screen?

Remember this

  • Media queries are conditional CSS rules based on screen size or features.
  • Always use a Mobile-First approach: base styles for mobile, min-width for larger screens.
  • Mobile-first CSS is additive, preventing tangled 'undo' code.
  • Tailwind prefixes like md: are just min-width media queries in disguise.

Done with this concept?

Mark it complete to track your progress. No login needed.