CSS Responsive Design

Introduction

Responsive design makes your website automatically adapt to different screen sizes — desktops, tablets, phones, ultra-wide monitors, anything. Modern CSS makes this easy using media queries, fluid units, flexbox, grid, and responsive images.

1. The Viewport Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1">

This ensures correct scaling on phones.

2. Media Queries

@media (max-width: 600px) {
  .box {
    background: #64b5f6;
  }
}

Runs only when screen width ≤ 600px.

3. Breakpoints

/* Phones */
@media (max-width: 600px) {}

/* Tablets */
@media (max-width: 900px) {}

/* Desktops */
@media (max-width: 1200px) {}

4. Responsive Flexbox

.container {
  display: flex;
  gap: 20px;
}

@media (max-width: 700px) {
  .container {
    flex-direction: column;
  }
}

5. Responsive Grid

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

Auto-adjusting cards with zero media queries.

6. Fluid Units (%, vw, vh, rem)

.hero {
  height: 60vh;
  font-size: 2.5rem;
}

7. Max-Width Containers

.container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
}

8. Responsive Images

img {
  width: 100%;
  height: auto;
}

9. Picture Element for Different Sizes

<picture>
  <source media="(max-width:600px)" srcset="small.jpg">
  <source media="(max-width:1200px)" srcset="medium.jpg">
  <img src="large.jpg" alt="Image">
</picture>

10. Clamp() for Responsive Font Size

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Automatically scales between min and max.

11. Responsive Navigation Example

nav ul {
  display: flex;
  gap: 20px;
}

@media (max-width: 600px) {
  nav ul {
    flex-direction: column;
  }
}

12. Avoid Fixed Widths

Use max-width instead of width to prevent overflow.

.card { max-width: 300px; }

13. Responsive Tables

.table-wrapper {
  overflow-x: auto;
}

14. Mobile-First Approach

.element {
  font-size: 1rem;
}

@media (min-width: 700px) {
  .element {
    font-size: 1.2rem;
  }
}

15. Test on Real Devices

Summary