Skip to content

Responsive design

Responsive design is shifting away from viewport breakpoints toward intrinsic, component-aware CSS — fluid sizing, container queries, and platform primitives that let layouts and typography adapt without media-query thresholds.

11 sources · Jul 9, 2026

Compiled by Claude · How this works →

Web · 43 neighbors

The classic responsive design model, built on viewport-width breakpoints and media queries, is under pressure from a more capable CSS platform. Building a UI Without Breakpoints argues the breakpoint model was always a workaround: modern CSS gives authors intrinsic layout tools, container queries, and container units so that components adapt to their own available space rather than the viewport’s. Media queries survive in this picture, but their scope narrows to genuine device capabilities and user preferences, not layout thresholds.

Typography is a central case. Modern Fluid Typography Using CSS Clamp details how clamp() produces font sizes that scale continuously between two viewport widths, replacing the stepped jumps of breakpoint-keyed type rules. The math maps minimum and maximum font sizes to viewport bounds, and the piece flags an accessibility concern: using rem-based clamp values preserves user font-size preferences in a way that px-based equivalents do not. Utopia’s type scale graph makes this fluid scale legible by plotting every step across the viewport range, revealing whether the relationships within a modular scale hold at all sizes.

The broader CSS platform expansion reinforces the trend. The Great CSS Expansion documents how anchor positioning, scroll-driven animations, view transitions, and native popovers now replace JavaScript libraries that previously handled layout and interaction work. CSS Style Queries extend this further: components can now react to parent CSS custom properties as stateful design tokens, removing the need for preprocessor logic to manage theming and state. Taken together, these features push responsive behavior into the component and property layers rather than the document-width layer.

Structurally, Jim Nielsen’s case for linked HTML pages touches responsive design obliquely: using CSS cross-document view transitions to stitch separate pages together avoids the JavaScript complexity that often complicates responsive progressive enhancement, keeping each page simple and self-contained.