Why Media queries in CSS? - Purpose & Use Cases

The Big Idea

What if your website could magically change its look to fit any screen perfectly?

The Scenario

Imagine you create a website that looks great on your big desktop screen. Then you try to view it on a phone, but the text is tiny and buttons are too close together.

The Problem

If you try to fix this by making separate versions of your site for each device and switching them manually, it becomes confusing and takes a lot of time. You might forget to update one version or make mistakes.

The Solution

Media queries let your website automatically adjust its style based on the screen size or device type. This means one site can look good everywhere without extra copies.

Before vs After

✗ Before

/* Desktop styles only */
body { font-size: 16px; }

/* No changes for small screens, looks bad */

✓ After

@media (max-width: 600px) {
  body { font-size: 14px; }
}

What It Enables

Media queries enable your website to respond and look great on any device, from phones to large monitors.

Real Life Example

Think of a news website that shows a full menu on desktop but switches to a simple hamburger menu on phones for easy navigation.

Key Takeaways

Manual styling for each device is slow and error-prone.

Media queries let styles change automatically based on screen size.

This makes websites flexible and user-friendly everywhere.