Module 16: Responsive Websites
Mobile-first and media queries
🏠The everyday picture
Packing for a trip: start with the essentials that fit in a small bag. If you get a bigger suitcase, add extras. Starting with the big suitcase and trying to squeeze it into a small bag is much harder.
📘What it really is
- Mobile-first means writing the base CSS for small screens, then adding rules for larger screens.
- Media queries apply rules only when a condition is true, usually a minimum screen width:
.cards {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 700px) {
.cards {
grid-template-columns: 1fr 1fr 1fr;
}
}
On phones, one column; from 700px wide, three.
- Why mobile-first works better:
- phone layouts are usually simpler (one column), so the base CSS is short;
- phones, often on slower connections, don't download and undo desktop rules;
-
it forces you to decide what really matters.
-
Media queries can also respond to other things, for example
(prefers-color-scheme: dark)for dark mode and(prefers-reduced-motion: reduce)for people who get dizzy from animations.
🖱️Try it
Rewrite your header so that on phones the name sits above the menu (a column), and from 700px wide they sit side
by side (a row). Use a min-width media query. Check both in device mode.
✅Quick check
In mobile-first CSS, do media queries usually use min-width or max-width?
Show the answer
min-width, because they add rules as the screen gets bigger.
Where do the rules for a phone layout go in mobile-first CSS?
Show the answer
In the base CSS, outside any media query.