📱 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.
Table of Contents
The Viewport Meta Tag
<!-- Always add this to <head> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">Output...
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;
}