Responsive design has evolved beyond viewport-based media queries. Modern CSS offers container queries, fluid typography with clamp(), and intrinsic sizing.
Container queries (@container) style elements based on their container size, not the viewport: @container (min-width: 400px) { .card { grid-template-columns: 1fr 1fr; } }.
Fluid typography: font-size: clamp(1rem, 2.5vw, 2rem) smoothly scales between minimum and maximum values.
CSS functions like min(), max(), and clamp() create fluid layouts without media queries: width: min(100% - 2rem, 800px).
The Single Column Layout pattern uses max-width containers that naturally adapt. Aspect ratio property maintains proportions: aspect-ratio: 16/9.
Progressive enhancement starts with mobile styles and adds complexity for larger screens. This is more maintainable than mobile-first or desktop-first approaches.