1. Media Queries

Media queries allow applying different CSS rules depending on device features like width, height, orientation, and more.

body {
  background: lightblue;
}

@media (max-width: 768px) {
  body {
    background: lightgreen;
  }
}

2. Mobile-first vs Desktop-first

- Mobile-first: start with small screens and use min-width media queries to scale up.
- Desktop-first: start with large screens and use max-width queries to scale down.

/* Mobile-first */
.button {
  font-size: 14px;
}
@media (min-width: 768px) {
  .button {
    font-size: 18px;
  }
}

/* Desktop-first */
.button2 {
  font-size: 18px;
}
@media (max-width: 767px) {
  .button2 {
    font-size: 14px;
  }
}

3. Viewport Meta Tag

The viewport meta tag ensures correct scaling on mobile devices. Without it, pages may look zoomed out.

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

4. Breakpoints

Breakpoints are screen-width ranges where layout changes. Common breakpoints:

• Small (≤576px) – Phones
• Medium (≥768px) – Tablets
• Large (≥992px) – Laptops
• Extra Large (≥1200px) – Desktops

.box {
  background: orange;
  padding: 20px;
}
@media (min-width: 768px) {
  .box {
    background: blue;
    color: white;
  }
}

5. Responsive Units (vw, vh, %, em, rem)

• vw: % of viewport width
• vh: % of viewport height
• %: relative to parent
• em: relative to parent font size
• rem: relative to root font size

.box1 {
  width: 50%;
  background: lightcoral;
}
.box2 {
  width: 50vw;
  background: lightseagreen;
}
.box3 {
  font-size: 2em; /* 2x parent */
}
.box4 {
  font-size: 2rem; /* 2x root */
}

6. Container Queries

Container queries let elements adapt based on their parent container’s size, not just the viewport.

.card-container {
  container-type: inline-size;
  border: 2px solid #333;
  padding: 10px;
}
.card {
  background: lightyellow;
  padding: 10px;
}
@container (min-width: 400px) {
  .card {
    background: lightblue;
  }
}