Skip to main content

Clamp | CSS

  • Clamp | CSS

O que é​

clamp() é uma função do CSS que restringe um valor a um intervalo: min(max). Você informa mínimo, ideal (normalmente fluido) e máximo — o resultado final nunca passa desses limites. Funciona onde aquele tipo de valor é aceito (comprimentos, porcentagens, números etc.). ([MDN Web Docs][1])

info

O gatilho é a alteração do viewport

Sintaxe​

propriedade: clamp(<min>, <ideal>, <max>);
  • Os três argumentos devem ser do mesmo tipo compatível (por ex.: todos comprimentos).
  • Pode combinar com calc() e variáveis CSS (var()). ([MDN Web Docs][1])

Exemplos rápidos:

/* Título com fonte fluida entre 1rem e 3rem, guiada por viewport */
h1 { font-size: clamp(1rem, 2.5vw, 3rem); }

/* Largura responsiva com limite */
.card { width: clamp(280px, 50vw, 720px); }

/* Espaçamento que cresce, mas sem exagero */
.section { padding: clamp(16px, 4vw, 48px); }

Tutoriais práticos e exemplos interativos: web.dev. ([web.dev][2])

Casos de uso comuns​

  • Tipografia fluida (reduzindo media queries). ([web.dev][2])
  • Layouts responsivos: larguras/alturas de cards, gaps, paddings, margens. ([web.dev][2])
  • Grades e trilhas: junto de minmax() e fit-content() quando quer um valor único com limites. ([MDN Web Docs][3])

Compatibilidade de navegadores

clamp() tem suporte amplo (Chrome/Edge 79+, Firefox 75+, Safari 14+, etc.). Verifique a tabela atualizada no Can I use. ([MDN Web Docs][1])

Armadilhas e notas​

  • Tipos precisam casar: auto não é aceito como argumento de clamp(); use min-/max-*/height como fallback para esses casos. ([MDN Web Docs][1])
  • Valores relativos (como vw) podem produzir resultados extremos em telas muito grandes/pequenas — por isso os limites são importantes. ([web.dev][2])
  • line-clamp não é clamp(); é outra propriedade para truncar linhas e tem suporte diferente. ([MDN Web Docs][4])

Especificação​

A definição formal e detalhes de verificação de faixas estão na W3C CSS Values & Units Level 4. ([W3C][5])

Receitas úteis​

Fonte fluida “responsiva sem media queries”

:root {
  --fs-min: 16px;
  --fs-ideal: 2vw;   /* guia fluida */
  --fs-max: 24px;
}
body { font-size: clamp(var(--fs-min), var(--fs-ideal), var(--fs-max)); }

Referência e discussão: MDN e artigos práticos. ([MDN Web Docs][1])

Card que cresce com a viewport, mas respeita limites

.card {
  width: clamp(20rem, 60vw, 46rem);
}

([web.dev][2])

Espaçamento escalável

.section { padding-block: clamp(1rem, 4vw, 3rem); }

([web.dev][2])

Leitura recomendada​

  • MDN: clamp() – CSS (definição, exemplos e compatibilidade). ([MDN Web Docs][1])
  • Especificação W3C: CSS Values and Units Level 4 (base formal). ([W3C][5])
  • web.dev: min(), max(), clamp() (guia com demos). ([web.dev][2])
  • Can I use: suporte do clamp() (tabela atualizada). ([Can I use][6])