Tutorials › CSS Mastery › Responsive Design

Responsive Design

6 min read Quiz at the end

Media queries apply styles at specific screen widths: @media (min-width: 768px) { }. Write mobile styles first and add breakpoints for larger screens. Use relative units like %, rem, and vw for flexibility.

Responsive Design

/* Mobile first */
.container { padding: 16px; }

@media (min-width: 768px) {
    .container { padding: 32px; }
}

@media (min-width: 1280px) {
    .container { max-width: 1200px; margin: auto; }
}

/* Responsive font size */
html { font-size: clamp(14px, 1.5vw, 18px); }

/* Flexible images */
img { max-width: 100%; height: auto; }

← CSS Variables Next: Pseudo-classes →

Topic Quiz · 5 questions

Test your understanding before moving on

1. Mobile-first means:

💡 Mobile-first: start with mobile styles, then enhance with min-width breakpoints for larger screens.

2. Which meta tag is required for responsive design?

💡 The viewport meta tag tells mobile browsers to use the device width.

3. max-width: 100% on images does what?

💡 max-width: 100% ensures images never exceed their container width.

4. Which media query targets screens wider than 768px?

💡 min-width: 768px applies styles when viewport is 768px or wider.

5. clamp() is useful for:

💡 clamp(min, preferred, max) creates fluid values that scale with the viewport.

Quick Access

Responsive Design

Responsive Design

Test your understanding before moving on