Calculadora de clamp() CSS
Insira um tamanho para telas pequenas e grandes e obtenha um valor clamp() fluido que escala suavemente entre elas — para fontes, paddings, margins ou gaps.
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)O resultado mantém uma parte em rem no termo central, garantindo que o texto ainda aumente quando o usuário aplicar zoom de 200% — um valor baseado apenas na viewport não permitiria isso.
Texto fluido, no tamanho ideal.
O cálculo é feito inteiramente no seu navegador. Nada do que você digita aqui é enviado para o BroBroGo.
FAQ
Como a calculadora monta o valor de clamp()?
Você define dois pontos: um tamanho para uma tela pequena e outro para uma tela grande. A ferramenta traça uma linha reta entre eles para que o tamanho cresça de forma fluida conforme a tela aumenta, e então o envolve na função clamp() para que nunca fique menor que o tamanho mínimo ou maior que o máximo. Entre as duas larguras, o tamanho escala de forma fluida; fora delas, ele se mantém no limite mais próximo.
Por que o resultado é em rem e vw em vez de pixels?
Os limites são definidos em rem e a parte dinâmica do meio mantém um componente em rem, garantindo que o texto cresça quando o leitor usar o zoom ou aumentar a fonte padrão do navegador — valores baseados apenas em pixels ou viewport podem impedir isso. Você digita os tamanhos em pixels porque é mais intuitivo, e a ferramenta converte para rem usando o tamanho da fonte raiz.
Posso usar isso para espaçamento e não apenas para tamanho de fonte?
Sim. O mesmo valor funciona para padding, margin, gap, width ou height — em qualquer lugar que aceite uma medida de comprimento. Mude a visualização para Caixa para ver o espaçamento crescer em vez do texto. Se os tamanhos mínimo e máximo forem iguais, o resultado se reduz a um comprimento fixo simples, já que não há o que escalar.
Todos os navegadores suportam clamp()?
Sim — todos os navegadores modernos suportam clamp() desde 2020, então você pode usar o valor diretamente sem precisar de fallback. Caso use um valor máximo muito alto ou uma taxa de variação rápida, vale a pena testar com zoom de 200% para garantir que o texto continue legível para quem precisa.