Results for “sizing”
Small, practical examples. Search by task or narrow things down below.
Adapt a component to its own container width
CSS: Container queries respond to a selected ancestor rather than the full viewport.
CSS✓ Tested
Adapt a layout to viewport orientation
CSS: The orientation query compares viewport dimensions rather than detecting a physical device type.
CSS✓ Tested
Add a clear boundary in forced-colors mode
CSS: Use a system color for a border when the user’s forced-color mode is active.
CSS✓ Tested
Apply an enhancement only when a feature is supported
CSS: A supports rule preserves the baseline outside browsers that understand the selected declaration.
CSS✓ Tested
Choose the smaller of a fixed and viewport-relative size
CSS: Min selects whichever supplied length is smaller at the current viewport.
CSS✓ Tested
Enhance a layout above a minimum viewport width
CSS: A mobile-first min-width query adds columns when enough horizontal space is available.
CSS✓ Tested
Hide interface controls in print layout
CSS: A print media query can retain article content while removing interactive controls.
CSS✓ Tested
Include padding in an element’s width
CSS: Learn how to include padding in an element’s width in a complete browser example.
CSS✓ Tested
Include padding in element width
Use border-box to keep CSS padding and borders inside the declared width.
CSS✓ Tested
Keep a viewport-relative size above a minimum
CSS: Max selects the larger of the candidate lengths.
CSS✓ Tested
Provide a fallback for an unset custom property
CSS: The second var argument supplies a value when the custom property is unavailable.
CSS✓ Tested
Scale a value from the root font size
CSS: Rem units follow the document root instead of accumulating through nested font sizes.
CSS✓ Tested