clamp() e dimensionamento fluido

clamp() permite que uma declaração substitua várias media queries escalonadas para propriedades numéricas como font-size, padding, gap e height.

Sintaxe

clamp(MIN, PREFERRED, MAX)

O navegador escolhe:

• MIN quando o valor preferido ficaria pequeno demais
• MAX quando o valor preferido ficaria grande demais
• PREFERRED nos demais casos

Exemplo:

h1 {
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

Em telas estreitas o título fica pelo menos 1.5rem. Em telas largas limita em 2.5rem. Entre os limites cresce com a largura do viewport.

Por que rem + vw juntos

Um título só em vw pode ficar ilegível no mobile ou enorme em monitores ultrawide. Combinar rem com vw dentro de clamp() oferece:

• Piso de acessibilidade via mínimo em rem
• Teto de layout via máximo em rem
• Crescimento fluido via vw no termo do meio

Modo font-size vs espaçamento

clamp de font-size afeta ritmo de texto e quebra de linha. clamp de espaçamento afeta gaps de seção, padding de hero ou altura de componente.

Ambos usam a mesma matemática, mas a prévia difere:

• Prévia de font-size mostra texto amostra nos tamanhos computados
• Prévia de espaçamento mostra barras ou blocos nas alturas computadas

Sempre pré-visualize em larguras mínima, média e máxima de viewport antes de publicar.

Do spec de design ao CSS

Fluxo típico:

1. Design entrega tamanhos min e max em px para mobile e desktop.
2. Escolha a faixa de viewport que combina com seus breakpoints de layout.
3. Gere clamp(minRem, preferredRem + preferredVw, maxRem).
4. Copie CSS, propriedade customizada ou variável SCSS para os tokens.

Exemplo de saída:

--heading-lg: clamp(1rem, 0.5rem + 2vw, 1.5rem);

Quando não usar clamp()

• Valores que devem “encaixar” exatamente em um breakpoint para reflow de layout
• Propriedades controladas por container queries com regras muito diferentes
• Casos em que um token rem simples basta

clamp() brilha quando você quer escala suave entre limites conhecidos.

Conclusão

Pense em clamp() como dimensionamento fluido com limites: tamanho mínimo legível, máximo do design e crescimento guiado pelo viewport no meio.

Gere e pré-visualize valores clamp na aba clamp do Conversor de unidades CSS / Gerador clamp antes de colocá-los na folha de estilo.