What is a Media Query?

A media query lets you apply CSS based on device conditions

(like screen width, height, orientation, etc.)

Used for Responsive Design

Basic Idea

@media (condition) {
  /* CSS rules */
}

Example

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

👉 When screen width ≤ 768px → background becomes red

1. Most Important: Width-Based Queries

max-width (Mobile-first target)

@media (max-width: 768px) {
  .box {
    width: 100%;
  }
}

👉 Applies below 768px

min-width (Desktop-first target)

@media (min-width: 768px) {
  .box {
    width: 50%;
  }
}

👉 Applies above 768px

Key Difference

 Standard Breakpoints (Industry)

👉 Common sizes:

/* Mobile */
@media (max-width: 480px)

/* Tablet */
@media (max-width: 768px)

/* Small Laptop */
@media (max-width: 1024px)

/* Desktop */
@media (max-width: 1200px)

4. Multiple Conditions

AND condition

@media (min-width: 768px) and (max-width: 1024px) {
  .box {
    background: blue;
  }
}

👉 Applies only between 768px–1024px

Height-Based Queries (Rare but useful)

@media (max-height: 600px) {
  .hero {
    padding: 20px;
  }
}

👉 Used for small screens (like laptops)