Format CSS Media Queries

Media queries are the mechanism that makes responsive design possible, allowing a single HTML page to present appropriately across the full range of screen sizes from smartwatches to ultrawide monitors. The mobile-first philosophy, championed by Luke Wroblewski and now the standard approach, means writing base styles that work for the smallest screens and using min-width media queries to progressively enhance the layout for larger screens. The mobile-first advantage is both practical and philosophical. Practical: small-screen users often have constrained bandwidth and processing power, so sending them a stylesheet with desktop layout rules that get overridden by mobile rules wastes resources. Philosophical: designing for the smallest screen first forces you to prioritize content and remove anything unnecessary, which produces better design decisions than designing desktop-first and trying to squeeze it onto mobile. This example shows the mobile-first pattern in action: base styles apply to all screen sizes (single-column grid, centered hero text, full-width container), the 640px breakpoint adds a max-width constraint to stop content from stretching too wide on large tablets, and the 1024px breakpoint switches the grid to three columns and adjusts typography. The print media query removes navigation and reduces font size for paper output. Breakpoint selection strategy: Tailwind CSS popularized breakpoints at 640px (sm), 768px (md), 1024px (lg), 1280px (xl), and 1536px (2xl), and these have become widely understood reference points. However, the best breakpoints are the ones where your specific content starts to look awkward — design-driven breakpoints rather than device-driven ones. As the range of device sizes has grown, content-driven breakpoints have become even more important. The print media query is often overlooked but genuinely useful for any content-heavy site. Users who print articles, invoices, or reports will appreciate hidden navigation and appropriately sized fonts. print: { display: none } on navigation and footer elements, combined with font-size: 12pt on body, makes printed output readable without requiring a separate print stylesheet. Container queries are the next evolution beyond media queries: instead of responding to viewport width, container queries respond to the width of a parent element. This enables truly modular components that adapt based on their container, not the viewport. The CSS container-type and @container rules are now baseline-supported across all major browsers. Tips: avoid setting max-width on the body — use a .container wrapper with max-width so full-width sections (backgrounds, hero images) can still span the viewport. Use rem units for breakpoint values rather than pixels so they respect browser font size preferences.

.container { width: 100%; padding: 0 1rem; }
.hero { font-size: 1.5rem; padding: 2rem 0; text-align: center; }
.grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .container { max-width: 640px; margin: 0 auto; } .hero { font-size: 2rem; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } .grid { grid-template-columns: repeat(3, 1fr); } .hero { font-size: 2.5rem; text-align: left; } }
@media print { .nav, .footer { display: none; } body { font-size: 12pt; } }