Gerador de CSS Clamp
Opções de CSS Clamp
Visualização ao vivo
Sobre o Gerador de CSS Clamp
CSS clamp() permite definir um valor mínimo, um valor preferencial flexível e um valor máximo em uma expressão. É especialmente útil para tipografia fluida e espaçamento responsivo.
Este gerador calcula uma expressão clamp() a partir dos tamanhos mínimo e máximo e do intervalo da janela de visualização onde o valor deve ser dimensionado.
Como usar esta ferramenta
- Escolha a propriedade CSS que deseja gerar.
- Defina o tamanho mínimo e máximo.
- Defina o intervalo da viewport onde o valor deve ser dimensionado.
- Copie o valor clamp() ou a regra CSS completa.
Dicas
- Use clamp() para títulos que devem ser dimensionados suavemente entre dispositivos móveis e computadores.
- Use clamp() para padding ou gap e evite um excesso de regras específicas de breakpoint.
- Mantenha a janela de visualização mínima menor que a janela de visualização máxima.
Verificações de CSS clamp() antes de publicar valores fluidos
Uma fórmula fluida precisa de limites úteis, faixa de viewport previsível e validação em tamanhos intermediários.
Defina limites reais
Escolha mínimo e máximo conforme o design sem extrapolar para tamanhos ilegíveis ou pouco utilizáveis.
Confira o valor preferido
Verifique se os coeficientes rem e viewport produzem os extremos esperados e não invertem o crescimento.
Teste larguras intermediárias
Revise celulares, tablets, notebooks, telas largas, zoom e traduções longas, não apenas os dois extremos.
Preserve a acessibilidade
Use unidades relativas quando adequado e confirme que o texto responde ao zoom e tamanho de fonte do usuário.
Ferramentas relacionadas
Você também pode achar essas ferramentas úteis.