Texto que escala sem media queries
Um título de 16 px no celular e 32 px no desktop antes exigia dois ou três breakpoints. Com clamp() basta uma linha: o tamanho cresce suavemente com a tela entre um piso e um teto. A parte difícil é o valor do meio, uma mistura de um tamanho fixo e de uma porcentagem da largura da tela. Este gerador o calcula a partir dos dois tamanhos que importam para você.
Obtenha um valor clamp() em quatro passos
- Informe o menor e o maior tamanho, por exemplo 16 e 32.
- Informe as larguras de tela em que cada um se aplica, por exemplo 320 e 1280 pixels.
- Escolha px ou rem e, se o seu site muda o tamanho de fonte raiz, os pixels em 1rem. Escolha a propriedade CSS para obter uma declaração pronta.
- Copie o valor ou a declaração. A tabela e o controle deslizante mostram o tamanho em qualquer largura intermediária.
O que as três partes do clamp() fazem
O resultado se parece com clamp(1rem, 0.6667rem + 1.6667vw, 2rem). O primeiro valor é o menor tamanho que a propriedade pode assumir, o último é o maior, e o do meio é a reta entre eles. A ferramenta calcula a inclinação a partir da diferença de tamanho dividida pela diferença de largura, e a parte fixa a partir do ponto em que essa reta cruza a largura de tela zero. Quando o tamanho deve diminuir em telas maiores, a ferramenta coloca o valor menor primeiro, porque o clamp() sempre espera o mínimo primeiro.
Usar rem mantém o zoom funcionando
Tamanhos em rem seguem o tamanho de fonte que o visitante definiu no navegador, enquanto valores em px não. Um tamanho só em vw ignora por completo a configuração de zoom, o que pode reprovar em verificações de acessibilidade. Misturar uma parte em rem com a parte em vw, como esta ferramenta faz para tamanhos em rem, mantém o texto ampliável. Teste o seu design com 200 % de zoom e mantenha o maior tamanho em no máximo cerca de duas vezes e meia o menor.
Nada sai do seu navegador
Os valores são calculados na página. O gerador não faz nenhuma requisição de rede e não guarda nada.