Lesson 3: Responsive Design

In this lesson, you’ll learn how to make your layouts adapt gracefully across devices of all sizes. We’ll cover the mobile-first approach, setting breakpoints with media queries, using fluid units like %, rem and viewport units, and best practices for testing and maintaining responsive designs.

Implementing Mobile-First Media Queries

Start by writing your base styles for the smallest screen. Then use @media (min-width: …) queries to enhance the layout at larger breakpoints. This ensures performance and usability on mobile devices. 

/* Base mobile styles */
.container {
  padding: 1rem;
}

/* Tablet and up */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
    margin: 0 auto;
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

Key Points

  • Use mobile-first: write base styles for small screens, then scale up.
  • Choose logical breakpoints based on content, not device names.
  • Prefer fluid units (%, rem, vw/vh) for widths and typography.
  • Test responsiveness by resizing the browser and using device emulators.
← Previous: Flexbox & Grid Next: Animations & Transitions →