Gerador de CSS Clamp
Calcula automaticamente valores fluidos da função clamp() para design responsivo.
Parâmetros
Você também pode gostar
Gráfico de Valores
Você também pode gostar
Pré-visualização em Tempo Real
Tipografia Fluida
Todos os seres humanos nascem livres e iguais em dignidade e em direitos.
Você também pode gostar
Código Gerado
Você também pode gostar
Sobre esta ferramenta
O Gerador de CSS Clamp é uma ferramenta que gera automaticamente código para tipografia fluida e espaçamento usando a função clamp() do CSS, escalando suavemente de acordo com a largura do viewport (janela de visualização).
Basta inserir os tamanhos mínimos e máximos dos elementos e as larguras do viewport, e o cálculo ideal do clamp() será gerado. Você pode verificar intuitivamente a transição com gráficos e pré-visualizações em tempo real, e exportar o código nos formatos CSS, variáveis CSS ou Tailwind CSS.
Todos os cálculos são processados dentro do seu navegador, garantindo que nenhum dado seja enviado para um servidor. Não é necessário registro de conta; use grátis agora mesmo.
Como usar
Definir parâmetros
Insira as larguras e tamanhos mínimos e máximos do viewport. Você também pode aplicar isso a propriedades diferentes do tamanho da fonte (ex: margin, padding).
Verificar gráfico e visualização
Confirme visualmente a transição de tamanho em diferentes larguras de viewport através do gráfico. Use a área de visualização para simular mudanças de viewport.
Copiar o código
Selecione o formato preferido entre CSS, Variável CSS ou Tailwind, depois clique no botão copiar. Cole diretamente no seu projeto.
Glossário
- clamp()
- Uma função de comparação CSS que define limites inferiores e superiores no formato
clamp(min, preferred, max). É uma forma poderosa de alcançar um tamanho fluido e suave no design responsivo sem media queries. - vw (viewport width)
- Uma unidade CSS equivalente a 1% da largura do viewport. Por exemplo, se o viewport tiver 1000px de largura,
1vwé 10px. É essencial para calcular valores fluidos vinculados à largura da tela. - rem
- Uma unidade CSS relativa baseada no tamanho da fonte do elemento raiz (geralmente
<html>). É recomendado em vez de px para respeitar as configurações do navegador dos usuários e melhorar a acessibilidade. - Tipografia Fluida
- Uma técnica de design onde os tamanhos das fontes escalam suavemente com base na largura do viewport, em vez de mudar abruptamente em breakpoints específicos, garantindo legibilidade ideal em qualquer tamanho de tela.
- preferred value (valor preferido)
- O valor ideal especificado como o segundo argumento na função
clamp(). Esta ferramenta o calcula como uma função linear formatada comointercept(rem) + slope × 100(vw), permitindo uma transição suave do tamanho mínimo para o máximo.
Detalhes Técnicos
A tipografia fluida utilizando a função clamp() do CSS baseia-se na matemática de uma função linear.
Derivando a Fórmula
Usando o tamanho mínimo (minSize), tamanho máximo (maxSize), largura mínima do viewport (minVW) e largura máxima do viewport (maxVW), a inclinação (slope) e a interseção (intercept) são calculadas da seguinte forma:
- slope = (maxSize - minSize) / (maxVW - minVW)
- intercept = minSize - slope × minVW
Usando esses valores, o valor preferido é calculado como intercept(rem) + slope × 100(vw).
Diferença para Media Queries
As @media queries tradicionais causam mudanças bruscas e em degraus em breakpoints específicos. O clamp() proporciona um escalonamento suave e linear através de qualquer largura de viewport. Isso reduz drasticamente a quantidade de código necessária e melhora a manutenibilidade.
FAQ
- Q.Meus dados são enviados para um servidor?
- Não. Todos os cálculos são concluídos inteiramente no seu navegador, o que significa que nenhum dado é enviado externamente. É completamente seguro de usar.
- Q.Isso funciona no Internet Explorer?
- Não. O Internet Explorer não suporta a função
clamp(). Por favor, use navegadores modernos como Chrome, Firefox, Safari ou Edge. - Q.Posso usar isso para propriedades diferentes de font-size?
- Sim.
clamp()pode ser usado para qualquer propriedade de comprimento CSS, incluindopadding,margin,gapewidth. Você pode selecionar a propriedade alvo para gerar o código apropriado. - Q.Por que a saída usa rem em vez de px?
- O uso de rem é recomendado para acessibilidade. Se os usuários aumentarem o tamanho da fonte padrão nas configurações do navegador, os valores em px o ignorarão, enquanto os valores em rem escalarão adequadamente.
- Q.Como a matemática subjacente funciona?
- Calcula a "inclinação" (slope) e a "interseção" (intercept) de uma equação linear usando as larguras e tamanhos de viewport mínimos/máximos fornecidos para gerar um
valor preferidousando unidades vw. Isso resulta em escalonamento proporcional entre os limites definidos.
Casos de Uso
📱Design Web Responsivo
Escale fluidamente títulos e texto de corpo desde dispositivos móveis até desktops com apenas uma linha de CSS, eliminando a necessidade de media queries complexas.
🧩Sistemas de Design
Gerencie centralmente toda a sua escala de tipografia usando clamp(). Exporte como variáveis CSS para integrá-las imediatamente como tokens de design em todo o seu projeto.
📏Espaçamento Fluido
Aplique clamp() a padding, margin e gap do grid para criar layouts bonitos que escalam proporcionalmente em toda a tela.
🤝Conformidade com Acessibilidade
Ao depender de uma saída baseada em rem, você respeita as configurações de tamanho de fonte padrão do navegador do usuário, oferecendo um design responsivo amigável e em conformidade com as diretrizes WCAG.
Enviar feedback
Deixe-nos saber sua opinião para nos ajudar a melhorar a ferramenta.
O feedback está temporariamente suspenso
O servidor está ocupado ou a proteção contra spam está ativa. Tente novamente mais tarde.