Web Development
web
css
responsive
What is Media Query?
Definition
A CSS media query applies styles conditionally based on device characteristics — screen width, orientation, resolution, or color scheme. The syntax @media (max-width: 768px) { ... } applies styles only on screens narrower than 768px.
Why It Matters
Media queries are the foundation of responsive design. They enable mobile-first layouts, dark mode support (@media (prefers-color-scheme: dark)), and print-specific styles. Every responsive website uses media queries.