Calculadora de clamp() CSS
Introduza um tamanho para ecrãs pequenos e grandes e obtenha um valor clamp() fluido que escala suavemente entre eles — 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 utilizador 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 introduzir aqui é carregado para o BroBroGo.
Perguntas Frequentes
Como é que a calculadora cria o valor de clamp()?
Define dois pontos: um tamanho para um ecrã pequeno e outro para um ecrã grande. A ferramenta traça uma linha reta entre eles para que o tamanho cresça de forma fluida conforme o ecrã aumenta, e depois envolve-o na função clamp() para que nunca fique abaixo do tamanho do ecrã pequeno ou acima do tamanho do ecrã grande. Entre as duas larguras, o tamanho escala de forma fluida; fora delas, mantém-se no limite mais próximo.
Por que razão o resultado é em rem e vw em vez de píxeis?
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 píxeis ou viewport podem impedir isso. Introduz os tamanhos em píxeis porque é mais intuitivo, e a ferramenta converte para rem usando o tamanho da fonte raiz.
Posso utilizar isto para espaçamento, e não apenas para o tamanho da 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 reduz-se a um comprimento fixo simples, já que não há nada para escalar.
Todos os navegadores suportam clamp()?
Sim — todos os navegadores modernos suportam clamp() desde 2020, pelo que pode utilizar o valor diretamente sem precisar de fallback. Caso utilize 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 continua a aumentar para os leitores que necessitam.