Definition
Conditional CSS rules that apply styles based on device characteristics—primarily viewport width, but also orientation, resolution, and media type—enabling responsive layout changes at breakpoints.
Why It Matters
Media queries are the foundation of responsive web design. They ensure that content is readable and functional across all devices, from mobile phones to high-resolution desktops, by adapting the design to the user’s environment.
Core Concepts
- Syntax:
@media screen and (min-width: 768px) { ... }. - Features:
min-width,max-width,orientation,resolution. - Breakpoints: Widths where layout rules change—set where content breaks, not per device.
- Em-Based Queries: Respond to user font-size changes, not just viewport pixels.
- Mobile-First: Base styles for small screens;
min-widthqueries add complexity upward.
/* Base styles (Mobile) */
.sidebar { display: none; }
/* Large screens (Tablet/Desktop) */
@media screen and (min-width: 768px) {
.sidebar { display: block; }
}