Media Queries: The Heart of Responsive Design

Media queries allow you to apply CSS styles only when certain conditions are met, usually the viewport width. They are the cornerstone of responsive design. The syntax is @media (max-width: 768px) { ... }. This says, 'If the screen width is 768px or less, apply these styles.' A common pattern is using min-width for a mobile-first approach. You set your base styles for mobile, then add @media (min-width: 600px) { ... } for tablets, and @media (min-width: 1024px) { ... } for desktops. It's crucial to set your breakpoints based on your content, not specific devices. You don't need separate styles for iPhone 12 vs. Galaxy S21. Instead, resize your browser window and add a breakpoint when your layout starts to break (elements overlapping, lines getting too long). The browser DevTools also allow you to simulate various devices to test your queries.