7. Responsive Design & Media Queries

Level: IntermediateDuration: 35m

Introduction to Responsive Design

Responsive design ensures your website looks good and works well on all devices: desktops, tablets, and mobile phones. It adjusts layouts, text, images, and other elements dynamically based on screen size and device characteristics.

Media Queries

Media queries allow you to apply CSS rules conditionally based on the viewport's properties such as width, height, and orientation.

css

/* Example: Mobile-first design */
body {
  font-size: 16px;
  background-color: #f0f0f0;
}

/* For screens 768px and up */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    background-color: #e0e0e0;
  }
}

/* For screens 1024px and up */
@media (min-width: 1024px) {
  body {
    font-size: 20px;
    background-color: #d0d0d0;
  }
}

@media (min-width: 768px) applies styles to viewports 768px and wider.
min-width is typically used for mobile-first designs; max-width for desktop-first.
You can use logical operators like `and`, `not`, and `only` for more complex queries: ```css @media only screen and (max-width: 600px) { .sidebar { display: none; } } ```

Responsive Units

Using the right CSS units is key for responsive layouts. Absolute units like `px` are fixed, while relative units scale based on screen size or parent elements.

css

/* Relative units examples */
.container {
  width: 80%;       /* percentage of parent container */
  height: 50vh;     /* 50% of viewport height */
  font-size: 1.2rem; /* relative to root font size */
  padding: 2em;     /* relative to parent font size */
}

`%` relative to parent size
`vw`, `vh` relative to viewport width and height
`vmin`, `vmax` relative to smaller/larger viewport dimension
`rem` relative to root font size
`em` relative to parent element's font size

Mobile-First Design

Mobile-first design starts with styling for the smallest screens first, then scales up for tablets and desktops. This approach ensures touch-friendly and performant designs on mobile devices.

css

/* Base mobile styles */
nav { font-size: 14px; padding: 10px; }

/* Tablet styles */
@media (min-width: 768px) {
  nav { font-size: 16px; padding: 15px; }
}

/* Desktop styles */
@media (min-width: 1024px) {
  nav { font-size: 18px; padding: 20px; }
}

Ensure buttons and links are touch-friendly
Avoid fixed widths; prefer relative sizing
Optimize images and media for smaller screens

Mini Project Step

Create a responsive landing page that adapts to mobile, tablet, and desktop screens. Include a header, navigation menu, content section, and footer. Use media queries to adjust font sizes, spacing, and layout. Make sure buttons and links are easily tappable on small screens.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Landing Page</title>
<style>
  body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
  header { background: #3498db; color: white; padding: 1rem; text-align: center; }
  nav a { margin: 0 0.5rem; text-decoration: none; color: white; font-size: 1rem; }
  main { padding: 1rem; }
  footer { background: #2ecc71; color: white; text-align: center; padding: 1rem; }

  /* Tablet */
  @media (min-width: 768px) {
    nav a { font-size: 1.2rem; }
    main { padding: 2rem; }
  }

  /* Desktop */
  @media (min-width: 1024px) {
    nav a { font-size: 1.5rem; }
    main { padding: 3rem; }
  }
</style>
</head>
<body>
  <header>
    <h1>My Responsive Site</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Contact</a>
    </nav>
  </header>
  <main>
    <p>Welcome to the responsive landing page. Resize your browser to see it adapt!</p>
  </main>
  <footer>
    &copy; 2025 My Responsive Site
  </footer>
</body>
</html>

MDN Media Queries Guide