Responsive Design & Media Queries

🎨 CSS Responsive Lesson 10 Intermediate

Responsive design ensures your website looks great on every screen size — from 320px mobile phones to 4K monitors. CSS media queries are the primary tool for adapting layouts to different viewports.

1 Mobile-First Approach

Write base styles for mobile first, then use min-width media queries to progressively enhance for larger screens. This is the modern industry standard.

CSS — Mobile-First Media Queries

/* Base: mobile styles */
.container {
  padding: 16px;
  display: flex;
  flex-direction: column;
}

/* Tablet: 768px and up */
@media (min-width: 768px) {
  .container {
    padding: 24px;
    flex-direction: row;
  }
}

/* Desktop: 1024px and up */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px;
  }
}

2 Other Query Types

CSS — Media Query Variations

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body { background: #0f172a; color: #f1f5f9; }
}

/* Reduced motion (accessibility) */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; }
}

/* Print styles */
@media print {
  .no-print { display: none; }
}

3 Code Challenge

Challenge: Build a 3-column grid that collapses to 1 column on mobile and 2 columns on tablet. Use repeat(auto-fill, minmax(280px, 1fr)) as an alternative to media queries.