@media is a CSS rule that applies different styles based on device characteristics (screen size, orientation, resolution, etc.) — the foundation of responsive web design.

What use???

@media applies CSS styles only when certain conditions are met

It checks: screen width, height, orientation, resolution, device type

Core technology for responsive web design (RWD)

Why use???

Different screen sizes: Mobile, tablet, desktop need different layouts.

Better UX: Content adapts to device for better user experience.

Print vs Screen: Different styles for printing vs displaying on screen

When use???

Use @media when:

Screen width changes — e.g., mobile (< 600px), tablet (600-900px), desktop (> 900px).

Orientation changes — portrait vs landscape.

Device type — screen, print, speech (screen readers).

User preferences — reduced motion, dark mode, data usage.

How to Use???

Basic Syntax :

@media media-type and ( media-feature : value ) { /* CSS rules */ }

Enter fullscreen mode

Exit fullscreen mode

Common…