Unidades de consulta de contêiner: cqw cqh

CSS fornece unidades relativas ao contêiner que dimensionam valores como porcentagens das dimensões do contêiner consultado — semelhantes às unidades da janela de visualização (vw/vh), mas relativas ao contêiner do componente.

1cqw = 1% do tamanho em linha do contêiner (a largura em uma escrita horizontal). Dimensione a tipografia e o espaçamento proporcionalmente ao contêiner do componente.

1cqh = 1% do tamanho em bloco do contêiner (a altura). Requer container-type: size, e não apenas inline-size.

cqi é um alias de cqw em uma escrita horizontal — refere-se especificamente à dimensão em linha, sem estar vinculado à horizontal.

cqb funciona como cqh, mas é relativo à dimensão — refere-se ao tamanho em bloco independentemente do modo de escrita.

cqmin = 1% da menor dimensão do contêiner. cqmax = 1% da maior. São análogos a vmin/vmax.

As unidades de contêiner permitem uma tipografia fluida realmente delimitada pelo componente:

Use unidades de contêiner quando:

• O texto de um componente deve ser dimensionado de acordo com a largura do componente
• O espaçamento dentro de um componente deve ser proporcional ao seu tamanho
• Você deseja um design fluido no nível do componente, independente da janela de visualização

A principal diferença: as unidades da janela de visualização (vw, vh) fazem referência à janela de visualização do navegador. As unidades de contêiner (cqw, cqh) fazem referência ao contêiner consultado mais próximo. Isso torna os componentes realmente portáteis — o mesmo componente mantém proporções corretas em uma barra lateral de 300px e em uma área principal de 900px.

As unidades de contêiner só funcionam quando existe um ancestral com tipo de contêiner. Sem um, a unidade de consulta de contêiner usa como alternativa a unidade de janela de visualização pequena (svw/svh).

Um componente completo usando unidades de contêiner:

O que font-size: 5cqw produz em um componente dentro de um contêiner com 400px de largura?

As unidades de consulta de contêiner (cqw, cqh, cqi, cqb, cqmin, cqmax) dimensionam valores em relação ao contêiner consultado, e não à janela de visualização. Use cqw para uma tipografia fluida que se adapta à largura do componente. Elas exigem um ancestral container-type para funcionar; sem um, usam como alternativa unidades da janela de visualização.