@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 Examples: 1.…