Modern CSS provides better tools than viewport breakpoints for responsive design. The post outlines four methods: intrinsic layouts using auto-fit and minmax(), fluid values with clamp(), container units (cqi) for local sizing, and container queries for structural changes. Media queries should be reserved for device capabilities and user preferences like prefers-reduced-motion, hover support, and color scheme. A practical migration checklist guides teams to audit existing breakpoints, replace scalar branches with fluid values, shift layout to intrinsic primitives, and scope behavior to components using container-type.
Table of contents
What Breakpoints Solved, and Why They WonWhy Breakpoint-First Layout Is Aging OutMethod 1: Intrinsic Layouts FirstMethod 2: Use Fluid ValuesMethod 3: Container Units for Local ResponsivenessMethod 4: Container Queries for Real Structural ChangesHalf-point Conclusion: Breakpoints Become Optional, Not FoundationalReframing Media Queries: Capabilities and PreferencesA Practical Migration ChecklistClosing ThoughtSort: