⭐ 0
🔍
Texto Imagem PDF e Documentos Áudio Música Eletrônica Tempo Utilitários Validadores Esoterismo Jogos

Pinça de espaçamento de fluido() Gerador

Calcule um valor CSS clamp() real e fluido a partir de um tamanho mínimo e máximo em duas larguras de janela de visualização, com a inclinação e a interseção mostradas passo a passo e uma visualização de redimensionamento ao vivo.

Processando... 0%

Resultado

CSS clamp() funciona exatamente da mesma maneira para espaçamento e tamanho da fonte - a propriedade é margin, padding ou gap em vez de font-size. Esta página abre a calculadora com um intervalo de 8px a 32px em uma janela de visualização de 320px a 1280px, uma etapa comum para preenchimento de seção ou lacunas de cartão que devem parecer apertadas em um telefone e espaçosas em um desktop sem uma consulta de mídia à vista.

A matemática subjacente não se importa com o que os números representam: a mesma fórmula de inclinação e interseção do eixo y que produz um tamanho de rumo fluido produz um valor de espaçamento fluido, portanto, o detalhamento abaixo mostra exatamente como 8px e 32px se transformam em uma linha clamp() pronta para cópia para preenchimento: clamp(...).

Arraste o controle deslizante de largura da janela de visualização para visualizar como seria o espaçamento em qualquer largura entre os dois pontos de interrupção, ajuste os valores mínimo e máximo para um intervalo mais restrito ou mais flexível e copie a linha finalizada diretamente para qualquer propriedade de espaçamento necessária.

🛡️
Executado no navegador

Seus arquivos e entradas nunca saem deste dispositivo. O processamento é executado totalmente offline. 100% seguro.

Formatos e regras aceitos

  • Matemática real de tipografia de fluidos: inclinação, coeficiente vw e interseção do eixo y mostrados explicitamente, não apenas a linha clamp() final.
  • Visualização ao vivo: arraste o controle deslizante de largura da janela de visualização para observar o redimensionamento do texto de amostra exatamente como seria enquanto uma janela real do navegador é redimensionada.
  • Modo de escala de tipo: um tamanho base e uma proporção de 1,125 a 1,5 geram seis etapas fluid clamp() - small, base, h4, h3, h2, h1 - como CSS pronto para cópia.

Principais benefícios

✓ A linha clamp(), os números de inclinação e interseção e a visualização ao vivo são atualizados conforme você digita – nenhum botão para pressionar.
✓ Um controle deslizante de largura da janela de visualização aciona uma caixa de visualização ao vivo, para que você veja o dimensionamento fluido exato em ação entre os pontos de interrupção mínimo e máximo, e não apenas uma fórmula.
✓ Um modo de escala de tipo separado transforma um tamanho e proporção básicos em uma escala de cabeçalho fluida completa de 6 etapas, pronta como um bloco de propriedades personalizadas CSS.

Casos de uso

  • • Transforme um tamanho de fonte mínimo/máximo e um intervalo de janela de visualização em uma linha clamp() real — inclinação, coeficiente vw e interseção incluídos — em vez de observar uma de um tutorial.
  • • Arraste um controle deslizante de largura da janela de visualização para visualizar um cabeçalho fluido ou redimensionamento do tamanho do corpo exatamente como faria enquanto uma janela real do navegador é redimensionada, antes de enviá-la para uma folha de estilo.
  • • Gere uma escala completa de tipo de fluido de 6 etapas (de pequeno a h1) a partir de um tamanho e proporção básicos, copiado como um bloco pronto para colar de propriedades personalizadas CSS.
  • • Crie um fluid clamp() para espaçamento (margem, preenchimento, lacuna) em vez de tamanho da fonte — a mesma fórmula de inclinação/interseção se aplica a qualquer propriedade CSS.