Gerador de braçadeira CSS

Um gerador de pinça () CSS constrói uma única declaração de pinça (mínimo, preferido, máximo) que escala um valor suavemente entre duas larguras de tela Em vez de escrever várias consultas de mídia para passar um rumo de 24 px em telefones para 48 px em desktops, você define um tamanho mínimo, um tamanho máximo e o intervalo de viewport para o qual eles mapeiam, e o gerador retorna uma linha de CSS que interpola todos os tamanhos no meio.

A função clamp () leva três argumentos: um limite inferior, um valor preferido e um limite superior O navegador usa o valor preferido, a menos que caia abaixo do mínimo ou acima do máximo, caso em que trava nesse limite Este gerador calcula o valor preferido como uma função linear da janela de visualização, combinando um termo rem fixo com um termo vw, de modo que o resultado cresce em passo com a janela, sem nunca cair abaixo do seu mínimo ou exceder o seu máximo Esta técnica é muitas vezes chamada de tipografia fluida, embora funcione igualmente bem para margens, preenchimento, lacunas e larguras.

Tudo é calculado no seu navegador com JavaScript do lado do cliente, então nada do que você insere é carregado e a ferramenta funciona offline depois de carregada Você pode inserir tamanhos em pixels ou rem, definir um tamanho de fonte root personalizado e ler uma tabela de visualização mostrando o valor computado em larguras de janela de visualização comuns, para que você possa confirmar o comportamento da curva antes de colar a braçadeira () em sua folha de estilo.

O dimensionamento de fluido tem uma armadilha de acessibilidade que vale a pena evitar deliberadamente Uma expressão de pinça cujo termo médio é expresso puramente em unidades de viewport ignora a configuração de tamanho de fonte do leitor, porque vw não responde a ela, e o texto que não pode crescer falha WCAG 1.4.4. manter um componente rem no valor preferido, que é o que a saída gerada faz, significa que o tamanho ainda responde ao zoom do navegador e a uma fonte padrão maior Sempre defina os dois limites: sem eles o valor escala sem limite em nenhuma direção.

Aqui está o gerador de pinça CSS em um rumo real Insira 24 e 48 px como os tamanhos, 360 e 1440 como as janelas de visualização, mantenha a raiz de 16 px e pressione Gerar pinça ().A saída é do tamanho da fonte: pinça (1,5 rem, 1rem + 2,2222 vw, 3rem); A tabela de visualização confirma: 24 px a 360, 33,07 px a 768, 38,76 px a 1024 e 48 px a 1440 Abaixo de 360 o título permanece a 1,5 rem e acima de 1440 ele para a 3 rem, que é todo o ponto da tipografia fluida com limites.