Calculadora de CSS Clamp()

O CSS clamp(MIN, PREFERRED, MAX) permite que uma única declaração substitua um conjunto inteiro de media queries: o valor permanece em MIN abaixo da viewport mais pequena, em MAX acima da maior e escala suavemente no intervalo entre elas. A parte difícil é o termo PREFERRED — uma expressão relativa à viewport como 0.833rem + 0.833vw — que ninguém quer calcular à mão. Esta calculadora calcula-o realmente a partir de quatro números: um tamanho mínimo, um tamanho máximo e a largura da viewport em que cada um se aplica.

Todos os valores intermédios são mostrados, não apenas a linha final: a inclinação (quantas unidades de tamanho o valor cresce por pixel de viewport), essa mesma inclinação expressa como um coeficiente vw, e a intersecção com o eixo y — a constante adicionada ao termo vw para que a linha passe exatamente pelos dois pontos que especificou. Qualquer pessoa que já tenha colado um valor de clamp() de um tutorial sem o compreender pode ver, e verificar, a aritmética real aqui.

Um selector de largura da viewport controla uma pré-visualização ao vivo, para que a adaptação fluida seja visível, e não apenas calculada: arraste-o entre os breakpoints mínimo e máximo e veja o texto de amostra redimensionar exatamente como aconteceria ao redimensionar uma janela real do navegador. A linha de saída e a análise atualizam-se a cada tecla premida — isto combina naturalmente com o conversor de px para rem quando o próprio tamanho de fonte base também precisar de conversão.

Mude para o modo de escala tipográfica para obter um sistema de tipografia fluida completo num só passo: introduza um tamanho base e um rácio modular (1,125 até 1,5) e obtenha seis tamanhos — pequeno, base, h4, h3, h2 e h1 — cada um calculado como a sua própria linha clamp() entre uma progressão mais suave em móvel e o rácio completo em ambiente de trabalho, prontos a copiar como um bloco de custom properties CSS.