Calculadora CSS Clamp()

CSS clamp(MIN, PREFERRED, MAX) permite que uma declaração substitua uma pilha inteira de consultas de mídia: o valor permanece em MIN abaixo da menor janela de visualização, em MAX acima da maior e é dimensionado suavemente entre elas. A parte difícil é o termo PREFERRED — uma expressão relativa à janela de visualização como 0,833rem + 0,833vw — que ninguém quer derivar manualmente. Esta calculadora calcula isso de verdade a partir de quatro números: um tamanho mínimo, um tamanho máximo e a largura da janela de visualização na qual cada um se aplica.

Cada número intermediário é mostrado, não apenas a linha final: a inclinação (quantas unidades de tamanho o valor cresce por pixel da janela de visualização), a mesma inclinação expressa como um coeficiente vw e a interseção do eixo y — a constante adicionada ao termo vw para que a linha passe exatamente pelos dois pontos que você especificou. Qualquer pessoa que tenha colado um valor clamp() de um tutorial sem entendê-lo pode ver e verificar a aritmética real aqui.

Um controle deslizante de largura da janela de visualização aciona uma caixa de visualização ao vivo, para que o dimensionamento fluido seja visível, não apenas calculado: arraste-o entre os pontos de interrupção mínimo e máximo e observe o texto de amostra ser redimensionado exatamente como seria enquanto uma janela real do navegador é redimensionada. A linha de saída e o detalhamento são atualizados a cada pressionamento de tecla - isso combina naturalmente com o conversor px para rem quando o próprio tamanho da fonte base também precisa ser convertido.

Mude para o modo de escala de tipo para obter um sistema completo de tipografia fluida em uma única etapa: insira um tamanho base e uma proporção modular (1,125 a 1,5) e obtenha seis tamanhos - pequeno, base, h4, h3, h2 e h1 - cada um calculado como sua própria linha clamp() entre uma progressão móvel mais suave e a proporção completa da área de trabalho, pronta para copiar como um bloco de propriedades personalizadas CSS.