A website that looks great on a laptop might be a disaster on a phone. Responsive
design is about making your site adapt to any screen size. And the most important
tool for that is the @media rule.
The @media Rule
Media queries let you apply CSS only when certain conditions are true — like the screen being a certain width. Think of them as if-statements for styles.
/* Base styles for all screens */
body {
font-size: 16px;
}
/* Styles for screens wider than 768px */
@media (min-width: 768px) {
body {
font-size: 18px;
}
}
In this example, font size jumps from 16px to 18px when the screen is at least 768px wide. Small screens get the smaller font, larger screens get the bigger one.
Breakpoints
A breakpoint is the screen width where your layout changes. Common breakpoints are:
- 480px — small phones
- 768px — tablets
- 1024px — small laptops
- 1200px — desktops
/* Default: mobile styles */
@media (min-width: 768px) {
/* tablet and up */
}
@media (min-width: 1024px) {
/* desktop */
}
Build your base styles for mobile first, then add layers for larger screens. That approach is called mobile-first, and it is the standard practice today.
Min-Width vs Max-Width
min-width means "apply these styles when the screen is at least
this wide." max-width means "apply when the screen is at most
this wide."
/* Mobile-first — min-width */
@media (min-width: 768px) { /* tablet up */ }
/* Desktop-first — max-width */
@media (max-width: 767px) { /* mobile only */ }
Most developers use min-width with a mobile-first approach. It just feels
more natural — start small and add complexity as the screen grows.
Responsive Layouts
Media queries really shine with layouts. A sidebar that sits beside the content on desktop can stack on top on mobile:
.layout {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.layout {
grid-template-columns: 250px 1fr;
}
}
Single column on mobile, two columns on wider screens. Simple, clean, and it works perfectly.