advanced-responsive-design

Container queries use the @container rule to style components based on their parent container's width instead of the viewport. Define a containment context on the parent, then write @container rules inside the component so it adapts wherever it is placed.

Fluid typography uses the CSS clamp() function with a minimum, preferred, and maximum value, such as font-size: clamp(1rem, 5vw, 2rem). The text scales smoothly with the viewport between the bounds without any breakpoints.

Use container queries for component-level adaptation, such as a card that must work in both a sidebar and a main grid. Use media queries for macro layout changes tied to the overall screen size, like switching from one column to three.

Reserve space before images load by setting the CSS aspect-ratio property on the image or its container. Also ensure images use max-width: 100% and height: auto, and serve appropriately sized sources with srcset and the picture element.

Interactive elements should have touch targets of at least 44px to 48px so they are easy to tap with a finger. Consider the thumb zone when placing navigation, such as using bottom navigation bars on mobile devices.