Responsive Web Design with CSS Media Queries

Media queries let CSS adapt based on viewport size, device characteristics, or user preferences — the foundation of responsive design since it replaced separate “mobile site” URLs.

/* Mobile-first: base styles for small screens, then progressively enhance */
.container {
    padding: 1rem;
}

@media (min-width: 768px) {
    .container { padding: 2rem; max-width: 720px; margin: 0 auto; }
}

@media (min-width: 1024px) {
    .container { max-width: 960px; }
}

/* Beyond just width */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

@media print {
    .no-print { display: none; }
}

Mobile-first (starting with base styles for small screens, then adding complexity with min-width queries) generally produces cleaner CSS than desktop-first with max-width overrides — you’re adding enhancements as space allows, rather than stripping things away.