Media Queries

Media queries let you apply CSS only when conditions match (mostly screen width). ## Why they matter Without media queries, a 3-column layout may look perfect on desktop but unreadable on mobile. ## Most common pattern Desktop default, then adjust for smaller screens: ```css .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } /* Mobile */ @media (max-width: 600px) { .cards { grid-template-columns: 1fr; } } ``` ## UI imagination Desktop: 3 cards in one row Mobile: cards become a single vertical list ## Which widths should you use? Instead of memorizing many breakpoints, use a simple approach: - 600px: phones - 900px: tablets - 1200px+: large screens But the best breakpoint is: “when your layout looks broken”. ## Graph: breakpoints ```mermaid flowchart TD A[Layout looks fine] --> B[Screen shrinks] B --> C{Layout breaks?} C -->|No| D[No need breakpoint] C -->|Yes| E[Add media query] ``` ## Remember - Media queries are for layout fixes, not decoration - Keep them minimal and purposeful