Sobre esta ferramenta
O Gerador de CSS Clamp combina um mínimo, um valor preferido que acompanha a largura da área visível e um máximo numa expressão CSS clamp(). Os tamanhos variam dentro dos limites definidos, com pré-visualização imediata do texto e código CSS explícito.
Como utilizar
- Escolha o modo de geração e introduza os tamanhos e as unidades correspondentes.
- Confirme que o mínimo não é superior ao máximo.
- Consulte o código e o texto de pré-visualização. No modo fluido, defina também um intervalo crescente de larguras da área visível.
- Copie o CSS e verifique o resultado no projeto em diferentes larguras da área visível.
Exemplos de utilização
- clamp(16px, 2vw, 32px) mantém o tamanho do texto entre 16 e 32px.
- Para tamanhos 16→32px e larguras 320→1200px, a fórmula fluida produz 16px e 32px nos respetivos extremos.
- Fora do intervalo de larguras definido, o tamanho mantém-se no mínimo ou no máximo.
font-size: clamp(16px, 2vw, 32px);
/* 16px at 320px viewport; 32px at 1200px viewport */
font-size: clamp(16px, calc(10.181818px + 1.818182vw), 32px);Funcionamento e explicação do CSS
clamp(min, preferred, max) usa o valor preferido limitado pelo mínimo e máximo. O modo fluido calcula slope = (maxSize − minSize) / (maxViewport − minViewport) e intercept = minSize − slope × minViewport. O valor preferido é calc(intercept px + slope × 100vw).
Utilizações comuns
- Definir títulos responsivos com limites inferior e superior.
- Ligar dois tamanhos de letra por interpolação linear.
- Reduzir as media queries usadas apenas para ajustar o tamanho do texto.
Privacidade
O processamento das entradas, os cálculos, a geração de CSS e as pré-visualizações decorrem no seu navegador. O conteúdo nunca é enviado para um servidor. Não são usados backend, base de dados, API online ou CDN de terceiros, nem as suas entradas são guardadas automaticamente.
FAQ
O que é CSS clamp()?
clamp() é uma função matemática CSS que restringe o valor preferido entre um limite inferior e um superior.
O que representam os três valores?
São, por ordem, mínimo, valor preferido e máximo. A ferramenta valida tamanhos e unidades e rejeita limites invertidos.
Porque é adequado para tipografia responsiva?
O valor preferido pode usar vw para acompanhar a largura visível, enquanto os limites impedem que o texto fique demasiado pequeno ou grande.
Porque exige o modo fluido duas larguras diferentes?
As duas larguras definem o intervalo de interpolação linear. A máxima tem de ser superior à mínima para evitar divisão por zero ou um intervalo invertido.
Que navegadores suportam clamp()?
Os principais navegadores modernos oferecem amplo suporte. Para compatibilidade com versões antigas, pode colocar uma declaração de tamanho fixo antes da declaração clamp().