Gerador CSS clamp() grátis
Gere um valor CSS clamp() fluido para tipografia e espaçamento responsivos. Defina o tamanho mínimo/máximo e o intervalo de viewport, veja uma pré-visualização ao vivo e copie o CSS em uma linha.
Tamanho renderizado em diferentes viewports
clamp(min, preferred, max) escala um valor de forma fluida com o viewport, depois trava no mínimo e máximo. Substitui pilhas de media queries para tipografia, espaçamento e larguras com uma única linha.
Usos comuns
- Criar Tipografia Responsiva FluidaDimensione tamanhos de fonte suavemente entre celular e desktop com uma linha.
- Margens e Preenchimento FluidosFaça o espaçamento da seção crescer com a janela de visualização em vez de pular nos pontos de ruptura.
- Substituir Consultas de Mídia por clamp()Colapso de pilhas de substituições de ponto de ruptura em um único valor fluido.
- Construir uma Escala de Tipo FluidaGere etapas de clamp() consistentes para uma escala de tipo de sistema de design.
- Títulos de Herói e Exibição FluidaFaça com que os grandes títulos da página de destino sejam dimensionados dramaticamente mas com segurança.
Como funciona
Esta ferramenta calcula valores CSS clamp() usando uma fórmula de interpolação linear escrita à mão — sem bibliotecas, sem idas e voltas ao servidor. Você insere dois tamanhos e duas larguras de viewport; a matemática funciona instantaneamente no seu navegador e produz uma expressão clamp() pronta para colar com um valor preferido baseado em vw que escala o seu tipo ou espaçamento suavemente entre esses pontos de quebra.
- 1Cálculo de declive linearA ferramenta calcula um declive pixel-por-pixel: (tamanhoMáx - tamanhoMín) / (viewportMáx - viewportMín). Este declive é depois convertido para unidades vw multiplicando por 100, que é o núcleo de como funciona o escalonamento relativo ao viewport em CSS.
- 2Derivação da interseçãoUm desvio de interseção (em px ou rem) é calculado para que a função linear atinja exatamente o seu tamanho mínimo no viewport mínimo. Juntos, declive e interseção formam o valor preferido dentro de clamp() — a parte que realmente escala.
- 3Conversão de unidade e formatação da saídaSe escolher saída em rem, cada valor de pixel é dividido pelo tamanho de fonte raiz configurado (padrão 16px) antes de ser escrito na string clamp(). Uma classe de valor arbitrário Tailwind correspondente também é produzida, com espaços substituídos por sublinhados segundo a sintaxe do Tailwind.
- 4Pré-visualização ao vivo com controlo de viewportUm controlo de intervalo permite-lhe deslizar de 320px a 1920px de largura. A cada posição a mesma fórmula de declive e interseção avalia o tamanho fixado em tempo real e renderiza texto de amostra nesse tamanho de pixel calculado, para poder ver o comportamento de escalonamento antes de copiar qualquer coisa.
Ferramentas relacionadas
Gerador de CSS Grid
Projete visualmente um CSS grid — faixas, unidades e lacunas — e copie o CSS e HTML gerados.
Qual é a Resolução da Minha Tela
Veja a resolução da sua tela em pixels CSS e reais, o tamanho da janela, a proporção de pixels, a profundidade de cor, HDR, suporte ao toque e taxa de atualização, e copie tudo.
Criador de Assinaturas
Desenhe uma assinatura com o mouse, o dedo ou uma caneta stylus, ou digite seu nome em uma fonte manuscrita, depois exporte-a como PNG transparente ou SVG.