O que é Clamp () no CSS (e como usá -lo)

Se você já tentou fazer com que seu site pareça bom nos telefones e nos monitores gigantes, já viu como espaçamento se quebra, as fontes diminuem drasticamente ou escalam excessivamente, e os elementos sobrecarregam ou desaparecem. Para corrigir tudo isso, você acaba escrevendo uma longa lista de consultas de mídia para um layout. É aí que o CLAMP () pode ajudar.

É uma função CSS que simplifica os tamanhos de configuração. Em vez de definir vários valores em pontos de interrupção fixa, ele permite definir um mínimo, um preferido e um máximo para que seus elementos escalem fluidamente à medida que a tela muda. A melhor parte é que eles permanecem dentro dos limites definidos, para que não haja inconsistências de layout.

Nesta postagem, explicaremos como o Clamp () funciona, por que muitas vezes pode ser mais eficiente do que as consultas de mídia e como o Divi 5 permite usá -lo sem escrever uma única linha de código!

O que é CLAMP ()

CLAMP () é uma função nativa no CSS, usada para definir valores responsivos que ajustam com base no tamanho da tela. Em vez de codificar um único número, você fornece ao navegador um intervalo para trabalhar - você define um valor mínimo, um valor preferido escalável e um valor máximo. Isso torna seu layout mais flexível e você não precisa escrever várias consultas de mídia para cada tamanho de tela.

Vamos entender isso com um exemplo de tamanho de fonte fluido que aumenta/diminui com base no tamanho da tela.

font-size: clamp(40px, 7vw, 100px);

Aqui, o tamanho da fonte nunca ficará abaixo de 40px, escala com base em 7% da largura da viewport e parará de crescer quando atingir 100px.

Outro grande benefício do uso do Clamp () é que, diferentemente das consultas de mídia, evita os saltos rígidos e mantém seus estilos mais previsíveis e legíveis.

O que queremos dizer com isso? Vamos entender isso comparando o CLAMP () com as consultas de mídia.

Comparando as consultas CLAMP () e mídia

As consultas de mídia são outra maneira comum de ajustar os tamanhos das fontes para diferentes larguras da tela. Aqui, você define pontos de interrupção nas larguras específicas da tela, onde seus estilos mudam. Por exemplo, você pode atribuir um tamanho de fonte para o desktop, outro para tablet e um terceiro para o celular, de modo que o tamanho da fonte mude apenas quando a largura da tela atinge cada ponto de interrupção.

Este método funciona, mas não é fluido. Entre 1000px e 501px, o tamanho da fonte permanece bloqueado a 100px. No momento em que a tela atinge 500px, a fonte cai abruptamente para 30px. Isso significa que não há transição suave, apenas uma mudança nítida.

Portanto, se você quiser fazer com que o escala pareça mais natural, precisará adicionar vários pontos de interrupção e ajustar manualmente o tamanho da fonte em cada um. Isso tornaria seu código demorado e inchado.

Por outro lado, o CLAMP () salva você de transições abruptas e código longo. De fato, pode ser escrito em uma única linha: tamanho da fonte: CLAMP (30px, 7VW, 100px).

Isso diz ao navegador para dimensionar a fonte entre 30px e 100px com base em 7 % da largura da viewport. O tamanho da fonte ajusta fluidamente em todos os tamanhos de tela sem saltos abruptos ou a necessidade de vários pontos de interrupção. Você ainda define os limites, mas a escala no meio é automática e mais consistente.

Na ação ao vivo, veja como uma comparação entre o redimensionamento da fonte dos pontos de interrupção de consultas da mídia e o CLAMP () parece:

Para redimensionamento responsivo, o Clamp () faz uma diferença perceptível. Em vez de esperar as larguras da tela fixa para acionar as mudanças no estilo, ele responde a cada pixel intermediário. Isso mantém seu código mais limpo e seu design mais consistente em todos os dispositivos. Além disso, é amplamente apoiado pela maioria dos navegadores modernos, o que significa que ele se tornará bem nesses navegadores , tornando -o uma substituição confiável e prática.

Como o Clamp () funciona nos bastidores

CLAMP () leva três valores que trabalham juntos para escalar qualquer propriedade CSS:

 clamp(minimum, preferred, maximum) 

Cada parte da função tem uma função específica:

• Valor mínimo: o menor valor possível. O elemento não será escalado abaixo deste ponto, por menor que seja a tela.
• Valor preferido: este valor escala com base no tamanho da tela. Geralmente é definido usando unidades relativas como VW ou uma expressão calc () para permitir a fluidez livre.
• Valor máximo: o tamanho mais alto permitido. Mesmo em telas muito grandes, o elemento não excederá esse valor.

Quando o navegador calcula o tamanho final, ele avalia o valor preferido primeiro. O navegador usa o mínimo se o tamanho da tela for pequeno o suficiente para que o valor preferido caia abaixo do mínimo. Da mesma forma, se a tela for ampla o suficiente para que o valor preferido exceda o máximo, ela permanece com isso.

Isso torna o comportamento previsível. Você sempre sabe que seu design permanecerá dentro do seu alcance definido, mas obtém escala flexível entre esses limites. Ao definir limites mínimos e máximos, o CLAMP () garante que seus elementos escalem fluidamente, mas nunca demais. Apenas o suficiente.

Escolhendo o valor preferido certo

Você deve ter notado que o valor preferido (o meio) desempenha um papel maior em tudo isso. Ele decide como os elementos escalam.

Primeiro, não deve ser um valor fixo como grampo (40px, 80px , 120px) porque, neste caso, o valor preferido não escala. Como 80px já cai entre o limite, o navegador o trava e ignora as mudanças no tamanho da tela. Isso resulta em um valor estático, que derrota o objetivo de usar o Clamp () em primeiro lugar.

Em vez disso, o valor preferido deve sempre ser relativo , como no grampo (40px, 7VW , 120px). Aqui, o 7VW responde à largura da viewport, que permite que o elemento escala suavemente entre os tamanhos da tela. A função de grampo garante que nunca fique abaixo de 40px ou acima de 120px, mantendo o tamanho responsivo a 7% da largura da tela.

Você também precisa considerar o tamanho do valor relativo. Por exemplo, um valor menor, como 2VW, escala o elemento mais gradualmente entre os tamanhos da tela, enquanto um valor maior como 6VW causa uma escala mais rápida e atinge o tamanho máximo mais cedo. Para identificar quais funcionários funciona para você, tente a calculadora de escala do tipo fluido. Permite visualizar valores diferentes e exportar CSS pronto para uso.

NOTA: A calculadora da escala do tipo de fluido sai dos valores VI. Se você usar a saída gerada no Divi, altere as unidades VI para VW.

Diferentes tipos de unidades no grampo ()

As unidades dentro do grampo () afetam como ela se comporta entre os dispositivos. Aqui estão tudo o que você pode usar:

Na maioria dos casos, os desenvolvedores usam PX para valores mínimos e máximos e uma unidade fluida como VW para o valor preferido. Isso dá o melhor equilíbrio entre controle e capacidade de resposta.

No entanto, você também pode usar unidades relativas para valores MIN e MAX, como CLAMP (2REM, 4REM, 8REM). Isso torna seu design mais acessível e mais fácil de escalar se o tamanho da fonte raiz mudar. É especialmente útil para usuários que ajustam as configurações do navegador para obter legibilidade.

grampo () no divi 5

A função Clamp () no CSS é incrivelmente útil, mas apenas se você estiver confortável escrevendo código. E aqueles que preferem construir seus sites visualmente sem tocar em uma folha de estilo? Gostaria de criar layouts de fluido usando o Clamp (), mas sem escrever código?

Nesse caso, as unidades avançadas do Divi 5 podem ajudar.

Inscreva -se no nosso canal do YouTube

Para encurtar a história, o Divi 5 suporta o Clamp () como uma unidade avançada em todo o construtor, e é super fácil acessá -los. Onde quer que você possa inserir um valor numérico, como tamanho da fonte, espaçamento ou largura da seção, você encontrará a opção de usar o CLAMP () diretamente.

Basta clicar no campo de entrada para selecionar entre as diferentes unidades avançadas disponíveis no Divi 5 (consulte a lista de cor escura ao lado do tamanho do texto do cabeçalho) , altere o tipo de unidade e defina seus valores mínimos, preferidos e máximos.

E é isso! Nenhuma codificação ou CSS - tudo o que você fez foi inserir um valor de grampo (), e seu cabeçalho se tornou fluido assim.

O Divi 5 facilita a criação de designs responsivos e fluidos sem escrever CSS personalizados. Você obtém toda a flexibilidade de um grampo () com a simplicidade de um editor visual. (Divi 5 suporta muitas outras unidades avançadas, incluindo Clamp ()).

Aprenda tudo sobre as unidades avançadas do Divi 5

Como usar o Clamp () no Divi 5?

Até agora, você já viu como é fácil usar o CLAMP () no Divi 5. Você simplesmente seleciona a unidade Clamp () e adiciona seus valores preferidos. Sem código personalizado, sem arquivos CSS, apenas uma interface visual limpa.

Mas o que torna o CLAMP () realmente poderoso dentro do Divi não é apenas a própria função. É com o que funciona.

O Divi 5 é construído em torno de um sistema de design modular. Isso significa que você pode combinar o CLAMP () com outros recursos avançados, como variáveis ​​de design e funções CSS como Calc () para tornar seu layout não apenas responsivo, mas também consistente e fácil de escalar. E é aí que fica interessante - o Divi 5 facilita o ajuste do grampo () no seu fluxo de trabalho.

Clamp () funciona com variáveis ​​de design

A melhor maneira mais eficiente de usar o Clamp () efetivamente no Divi 5 é combiná -lo com variáveis ​​de design.

As variáveis ​​de design permitem definir valores globais (como tipografia, cores e até tamanhos de fonte) para que você possa usá -los em todo o site para mantê -lo consistente. Você também pode salvar os valores do CLAMP () como variáveis ​​de número. Isso permite salvar valores globais responsivos de modo que, quando você os altere, todas as instâncias são atualizadas de uma só vez.

Por exemplo, você define os tamanhos do Clamp () para títulos H1-H6 como este:

E salve -os dentro do Variable Manager no Divi Builder:

Em seguida, todos os seus títulos em todo o site se adaptarão com base nos valores definidos de clamp ().

Agora, se você deseja atualizar o tamanho do H3, basta modificar sua variável de número e ela será atualizada em todos os lugares que você o usou. ( Deseja criar seu próprio sistema de tipografia no Divi 5? Aqui está um guia completo sobre o gerenciamento de fontes e tamanhos de fontes usando as variáveis ​​CLAMP () e design.)

Essa abordagem permite o controle centralizado, facilitando a atualização das configurações da tipografia globalmente sem ajustar manualmente cada instância. Ao aplicar essas variáveis ​​CLAMP () por meio de predefinições de grupo de opções, você otimiza seu processo de design.

CLAMP () combina com calc ()

Você também pode usar a função calc () dentro do clamp () para ajustar a escala dos seus valores. Isso é especialmente útil quando você deseja adicionar um tamanho de linha de base e, em seguida, ampliá -lo com mais precisão com uma unidade relativa como o VW.

Por exemplo, tamanho da fonte: CLAMP (1REM, CALC (0,75REM + 2VW), 2.5rem) usa calc () para adicionar uma base estável (0,75REM) e depois escala -o com 2VW.

Isso permite que a fonte escala com base na largura da viewport, mas também oferece uma vantagem com um tamanho de fonte base. Isso é útil para manter a legibilidade em telas menores, sem precisar de várias variações de pinça. O truque calc () dentro do grampo () é perfeito para qualquer lugar que você desejar esse controle extra sobre como as coisas escalam.

Casos de uso prático de grampo ()

Agora, vejamos alguns casos de uso comum de Clamp () e como é fácil quando você está aplicando com Divi 5:

1. Tamanhos de cabeçote consistentes em todos os dispositivos

A tipografia responsiva é o melhor caso de uso de grampo (). Como já tínhamos definido nossos tamanhos de título (H1-H6) usando o CLAMP () em variáveis ​​de design, é hora de vê-las em ação.

Criamos esta página usando o H5S para itens de menu. Em seguida, aplicamos a variável de número H5 a cada um dos tamanhos de texto de título do H5. E, como você pode ver, cada um escala fluidamente nos pontos de interrupção.

O texto permanece claro, equilibrado e visualmente consistente em todos os nossos pontos de interrupção responsivos definidos.

Você também pode usar o CLAMP () para altura da linha e espaçamento de cartas. Ajuda a manter a legibilidade ideal, aumentando um pouco as lacunas de linha ou o espaçamento à medida que a tela fica mais larga. Uma pequena mudança, mas faria com que o conteúdo de forma longa pareça mais respirável.

2.

Os parágrafos são naturalmente fáceis de ler no celular, pois linhas curtas em telas compactas tornam o conteúdo digerível. No entanto, em monitores ultra largados, os leitores serão forçados a escanear linhas horizontais inteiras se uma seção de largura completa esticar o texto longe demais. Parece ler um outdoor. O comprimento da linha ideal de uma frase é de cerca de 50 a 75 caracteres; portanto, se o seu site exibir uma frase sem fim em uma tela ampla, você poderá perder o interesse do leitor.

Para corrigir isso, defina uma largura responsiva, como grampo (300px, 65VW, 800px) para escalar seu parágrafo para uma largura fixa (800px) para que os parágrafos apareçam legíveis mesmo em telas mais amplas.

Esta é uma maneira perfeita de tornar as postagens do seu blog legíveis em telas mais amplas.

3.

Da mesma forma, imagens únicas (como imagens em destaque) podem parecer muito grandes em telas ultra largas. Parece perfeito em um tablet, mas pode se esticar desajeitadamente em um monitor 4K, que pode parecer avassalador em comparação com o restante do conteúdo.

Para corrigir isso, use uma largura de imagem baseada em grampos, como grampo (300px, 60VW, 1000px). Ele garante que a imagem cresça fluidamente com o tamanho da tela, mas para antes de dominar o layout.

Ou então, você pode simplesmente definir uma largura de grampo () para toda a linha do contêiner para garantir que todos os elementos (imagem, título e texto) escalem uniformemente.

4. Adicione o preenchimento de fluidos e margem com grampo ()

Os designers costumam obter o espaçamento correto para a área de trabalho, mas nem sempre funciona bem em telas menores ou muito grandes. O preenchimento e as margens fixos nem sempre se ajustam com o tamanho da tela. É aí que o CLAMP () se torna útil.

Por exemplo, uma pinça (0,5REM, 2VW, 2REM) margem e um grampo (1REM, 3VW, 4REM) preenchimento em uma galeria de imagens criam espaços que iniciam pequenos e escalam com a tela.

Dá à sua sala de layout para respirar telas grandes e mantém as coisas apertadas no celular:

CLAMP () também ajuda a escalar o preenchimento suavemente em torno de layouts de cartão, galerias de imagens, recipientes de seção e blocos de texto, especialmente quando você deseja espaçamento intencional sem ajustes constantes do ponto de interrupção.

5. Crie seções de heróis responsivas que escalem perfeitamente

Usando o CLAMP (), você pode fazer com que as seções de heróis pareçam perfeitas em todas as tela definindo o cabeçalho do herói, o preenchimento de botões e o espaçamento da legenda. Salvamos esses valores CLAMP () como variáveis ​​de design para simplificar seu aplicativo. (Mas você não gostaria de preencher seu gerente de variável, economizando todos os detalhes minuciosos.)

A aplicação desses valores agora é fácil.

Uma vez salvo, cada um se adaptará automaticamente ao tamanho da tela para dar à seção de heróis a primeira impressão perfeita em todos os dispositivos.

Projete layouts perfeitos de pixels usando Clamp (), sem escrever uma única linha de código

CLAMP () ajuda a projetar layouts de líquido e responsivo sem depender de consultas infinitas de mídia. E com o Divi 5, você não precisa escrever uma única linha de código para usá -lo. Se você preferir codificar ou desfrutar de design visual, as unidades avançadas da Divi facilitam a aplicação do CLAMP () para fontes e espaçamento mais fáceis.

Com recursos poderosos como Clamp () tão facilmente acessíveis, você não gostaria de experimentar o Divi 5 para si mesmo? Teste valores diferentes, crie seu próprio sistema responsivo e veja o quão flexível seus layouts podem se tornar. E quando você tiver um truque favorito (), compartilhe -o nos comentários abaixo! Adoraríamos ver o que você cria.