Calculadora de clamp() CSS

Informe o tamanho que você quer em telas pequenas, o tamanho para telas grandes e as duas larguras de viewport entre eles. A ferramenta calcula o valor clamp() que traça uma reta entre esses dois pontos e mostra o resultado em sete larguras comuns. A frase de exemplo na pré-visualização usa de verdade o valor gerado, então ela muda quando você redimensiona a janela.

Meus dados são enviados para algum lugar?

Não. Tudo aqui é aritmética feita no seu navegador. Os números digitados nunca vão para um servidor, e não há conta, registro nem requisição de rede por trás do resultado.

Como funciona a matemática?

O clamp() do CSS recebe três valores: um mínimo, um valor preferido e um máximo. O navegador usa o valor preferido, mas nunca deixa ele cair abaixo do mínimo nem passar do máximo.

A parte interessante é o valor preferido. Ele precisa crescer junto com a viewport, e é isso que as unidades vw fazem: 1vw é um por cento da largura da viewport. Para ir de 16px numa viewport de 320px até 48px em 1280px, o tamanho precisa ganhar 32px ao longo de 960px de largura, ou seja 0,0333px por pixel, o que dá 3.3333vw. Só a inclinação, porém, cairia nos tamanhos errados, então um deslocamento fixo empurra a reta para o lugar certo. O resultado é clamp(1rem, 0.3333rem + 3.3333vw, 3rem), e esse deslocamento é o motivo de o termo do meio ter duas partes.

Os números são arredondados em quatro casas decimais e os zeros à direita somem, então você recebe 1.5rem em vez de 1.5000rem. Os tamanhos são digitados em pixels; trocar a unidade de saída para rem divide tudo pelo tamanho da fonte raiz, que é 16px na configuração padrão de qualquer navegador.

E se os números não fizerem sentido?

A ferramenta avisa em vez de produzir algo errado em silêncio. Se as duas larguras de viewport forem iguais não existe intervalo para escalar, então o tamanho fica fixo e o termo em vw desaparece. Se o tamanho mínimo e o máximo forem iguais, o aviso aparece pelo mesmo motivo.

O caso mais traiçoeiro é um mínimo maior que o máximo. O CSS resolve clamp() como max(MIN, min(VALUE, MAX)), então o mínimo vence e o tamanho fica preso ali para sempre. Os navegadores fazem isso sem reclamar. A tabela da pré-visualização mostra o valor travado e um aviso explica o porquê.

Onde isso aparece?

Títulos que devem ser grandes no desktop e legíveis no celular, espaçamento de seção que não pode continuar em 8rem numa tela de 375px, o gap de uma grade de cards e textos de destaque que precisam preencher o espaço em qualquer largura.