📱 Lesson 7: Responsive Design & Media Queries
⏱️ Estimated time: 30 minutes | Difficulty: Intermediate
Mobile First
Responsive web design is about creating web pages that look good on all devices! It automatically adjusts for different screen sizes and viewports.
The Viewport Meta Tag
<!-- Always add this to <head> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">Media Queries
/* Mobile first approach */
.container { padding: 1rem; }
/* Tablet (768px+) */
@media (min-width: 768px) {
.container { padding: 2rem; max-width: 720px; }
.grid { grid-template-columns: repeat(2, 1fr); }
}
/* Desktop (1024px+) */
@media (min-width: 1024px) {
.container { max-width: 960px; }
.grid { grid-template-columns: repeat(3, 1fr); }
}
/* Large Desktop (1200px+) */
@media (min-width: 1200px) {
.container { max-width: 1140px; }
}Responsive Typography
/* Use clamp for fluid font sizes */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
p { font-size: clamp(0.9rem, 2vw, 1.1rem); }
/* Responsive images */
img {
max-width: 100%;
height: auto;
}Responsive Grid Pattern
/* Auto-responsive cards — no media query needed! */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
/* Responsive flex navigation */
nav {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}