Calculadora de CSS clamp()
Dê um tamanho num viewport pequeno e outro num grande. Você recebe o clamp() que transita suavemente entre os dois, em rem, para continuar respeitando o tamanho de fonte do navegador do leitor.
A raposa marrom ágil
Escala tipográfica
Por que rem e não px
Um tamanho em px ignora o tamanho de fonte que o leitor escolheu no navegador. A mesma declaração em rem acompanha esse valor, então quem definiu 20px como padrão recebe texto maior em vez do seu 16 fixo. O termo do viewport continua em vw de qualquer forma — isso é largura de tela, não preferência do leitor.
Perguntas frequentes
O que o termo do meio faz?
É uma reta que passa pelos seus dois pontos: um intercepto mais uma inclinação em vw. Abaixo do viewport pequeno ela trava no mínimo; acima do grande, no máximo.
O máximo pode ser menor que o mínimo?
Sim, e clamp() continua funcionando — mas o resultado encolhe conforme a tela cresce, o que quase nunca é o que se quer. A página avisa quando acontece.
Alguma coisa é enviada aos seus servidores?
Não. É aritmética no seu navegador; nada do que você digita sai da página.
Feito pela equipe GO AI. Todas as ferramentas gratuitas