Calculadora CSS clamp para tamanhos fluidos

Defina os tamanhos extremos e as larguras correspondentes. Ajuste a prévia para conferir o valor entre esses limites.

Funciona localmente no seu navegador

· clamp() · vw · rem

960px

Como montar uma regra clamp() a partir de dois extremos de tamanho

A calculadora transforma dois tamanhos extremos e as larguras de tela em que eles se aplicam em uma única expressão clamp(). Ela escreve a regra para font-size, padding, gap ou margin, mostra o valor em qualquer largura dentro do intervalo e copia o CSS final. Tudo roda na página.

A prévia não redimensiona a sua janela: o controle deslizante simula uma largura de tela e o elemento de demonstração recebe o mesmo valor em px que a expressão resolveria naquela largura. Abaixo da largura menor o navegador mantém o tamanho mínimo e acima da maior mantém o máximo.

Escolha a propriedade CSS que a regra deve definir: font-size, padding, gap ou margin.

Informe o tamanho mínimo e o máximo em px e as larguras de tela às quais eles pertencem. Os padrões — 16 px e 32 px entre 320 px e 1440 px — descrevem um título que cresce do celular ao desktop.

Selecione a unidade de saída. rem divide cada medida pelo tamanho da fonte raiz, 16 por padrão e editável; px mantém os números como digitados. O coeficiente vw é idêntico nos dois.

Arraste o controle da prévia ou digite uma largura dentro do intervalo para ler o valor resolvido ao lado. As três etiquetas abaixo da prévia mostram o valor na largura mínima, na média e na máxima.

Copy CSS copia a regra inteira; Reset devolve os oito campos aos valores padrão.

A aritmética por trás da string clamp()

De dois extremos à string clamp()

A expressão é a reta entre os dois extremos. Com os padrões a inclinação é (32 − 16) ÷ (1440 − 320) × 100 = 1.4286vw e o intercepto é 16 − 1.4286 × 320 ÷ 100 = 11.4286px, então a regra fica clamp(1rem, 0.7143rem + 1.4286vw, 2rem).

Em 960 px o termo do meio resolve para 0.7143rem + 1.4286vw = 25.14px, que é o que a leitura e o elemento de prévia mostram. Os termos são arredondados em quatro casas decimais e o valor exibido em duas.

Saída em rem e tamanho da fonte raiz

Com a unidade em rem, cada medida da expressão é dividida pelo tamanho da fonte raiz: com os 16 px padrão o intervalo 16 → 32 px vira 1rem → 2rem, enquanto uma raiz de 20 transforma o mesmo intervalo em 0.8rem → 1.6rem. O coeficiente vw não é convertido, porque um vw é uma fração da viewport e não da raiz.

O campo da raiz é uma constante de conversão, não um ajuste enviado ao navegador. O tamanho renderizado só corresponde à prévia quando o campo corresponde ao font-size do elemento html da página em que a regra for colada.

O que os campos aceitam e quando a saída é limpa

Os tamanhos aceitam decimais e devem ser 0 ou maiores; o máximo não pode ser menor que o mínimo e a largura maior deve ser superior à menor. Extremos iguais são permitidos e geram uma regra plana como clamp(1rem, 1rem + 0vw, 1rem).

Um intervalo impossível ou um campo de tamanho ou de largura vazio limpam a regra, as etiquetas de amostra, a leitura e a prévia, e desativam o Copy CSS até que o intervalo volte a ser válido, de modo que a área de transferência nunca recebe uma regra que não corresponde aos campos na tela. O campo da raiz só é obrigatório quando a unidade de saída é rem.