jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils CSS

Gratuit Calculateur d'unités de conteneur

Calculez des valeurs clamp() avec les unités de requête de conteneur pour un dimensionnement responsive par composant.

Chargement de l'outil...

Qu'est-ce que Calculateur d'unités de conteneur ?

Container query units work like viewport units but are relative to a query container rather than the viewport. cqi is 1% of the container inline size, cqw is 1% of the container width, cqb is 1% of the container block size, cqmin and cqmax are the min/max of cqi and cqb. They enable component-level responsive sizing where a component adapts to its container, not the browser window.

Réponse rapide

Use container query units (cqi, cqw, cqb, cqmin, cqmax) with clamp() for component-level responsive sizing. They work like viewport units but scale with the parent container width. Set container-type: inline-size on the parent and use the clamp() expression in child styles.

Limites

  • Container query units require container-type to be set on an ancestor. Without an established container context, they fall back to viewport-relative behavior, which can produce values far larger than intended.
  • Browser support for container query units matches container query support: Chrome 105+, Firefox 110+, Safari 16+, Edge 105+. Older browsers do not recognize these units at all.
  • When multiple container ancestors exist, the nearest ancestor with container-type set is used. This can produce unexpected behavior if a deeply nested component accidentally references a closer container.

Comment utiliser cet outil

  1. Enter the minimum and maximum target sizes for your CSS property in pixels.
  2. Set the container width range — the min container width where the property reaches its minimum, and the max width where it reaches its maximum.
  3. Choose a container query unit and the CSS property name.
  4. Copy the clamp() expression and ensure the parent element has container-type: inline-size.

A quoi il sert

  • Make a card title font-size scale with the card width instead of the viewport width.
  • Create a component padding that adapts to the available container space.
  • Build dashboard widgets where every element scales proportionally to the widget container.

Cas d'usage

Exemples concrets

Exemple

Card title scaling with container

A card component should have a title font-size of 16px at 320px container width and 32px at 800px. Use cqi to scale the title with the card container so the same component works in a narrow sidebar and a wide main column.

Exemple

Responsive component padding

A callout box should have 16px padding at 300px container width and 40px padding at 1000px. Use the calculator with cqi and copy the clamp() expression for the padding property.

Erreurs frequentes

  • Using container query units without setting container-type on a parent — the browser uses the initial containing block (viewport), which defeats the purpose.
  • Expecting container query units to work like viewport units — they are relative to the nearest query container ancestor, which may be a very different size than the viewport.
  • Using container query units in a deeply nested component where the nearest container is not the intended sizing reference.

Vérification

  1. Test the component at different container widths by resizing the parent element (not the viewport) and verifying the property scales correctly.
  2. Check browser DevTools Computed panel to confirm the clamp() expression resolves to the expected pixel value at known container widths.

FAQ

Questions sur Calculateur d'unités de conteneur

What is the difference between cqi and cqw?

cqi is 1% of the container inline size — in horizontal writing modes this equals the container width. cqw is always 1% of the container width regardless of writing mode. For most Latin-script sites, they are identical. For vertical writing modes or RTL pages, cqi adapts to the writing direction.

Do container query units work without @container queries?

Yes. Container query units work as soon as a parent element has container-type set. You do not need an @container query rule to use the units. Simply set container-type: inline-size on a parent and use cqi/cqw/cqb anywhere in the descendant styles.

What happens if no container ancestor exists?

The browser falls back to the initial containing block — the viewport. This means a clamp() using cqi behaves like vw (viewport width) when no container context is found. This fallback can produce unexpected large values at wide viewports, so always ensure a container ancestor.

Outils lies

Autres outils outils css

A essayer aussi

A essayer aussi