cqw · cqh
Um por cento do contêiner de consulta — a largura, enfim, local.
Um cqw é 1% da largura do contêiner de consulta mais próximo — o ancestral declarado com container-type —, e um cqh, 1% da altura dele. Pela primeira vez uma unidade mede o recipiente do componente, não a janela inteira. Sem contêiner por perto, elas caem para as unidades da janela pequena.
É a escolha certa para componentes que moram em colunas de larguras variadas: o mesmo cartão, com o título em 6cqw, compõe grande na coluna larga e miúdo na estreita — tipografia fluida sem uma única media query.
.cartao {
container-type: inline-size;
}
.cartao h3 {
font-size: 6cqw;
}