📖 Notes
LESSON 11 OF 32
Responsive Design & Media Queries
Mobile-First Design
Write styles for mobile first, then add breakpoints for larger screens.
Breakpoints
Three Common Widths
600px
Mobile breakpoint
900px
Tablet breakpoint
1200px
Laptop breakpoint
Fluid Units
- % — relative to the parent element
- vw — relative to viewport width
- rem — relative to the root font size
Mobile-First Card Grid
CSS.cards {
grid-template-columns: 1fr; /* mobile */
}
@media (min-width: 600px) {
.cards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
.cards { grid-template-columns: repeat(3, 1fr); }
}
📱
Mobile-first means min-width, not max-width
Writing the base styles for the smallest screen and layering on
@media (min-width: ...) rules as the screen grows tends to produce simpler, more predictable CSS than starting from desktop and overriding downward.