Usando min () e max () no divi 5 para criar layouts inteligentes

CSS min () e max () são duas funções versáteis, porém subutilizadas, em design de web responsivo, e o Divi 5 tem suporte total para ambos desde a atualização avançada das unidades. Embora tenhamos explorado anteriormente a tipografia de fluidos com cálculos de grampo () e dinâmico com calc (), min () e max (), fornecem maneiras ainda mais simples de alcançar um design responsivo.

Nesta postagem, mostraremos como usar essas funções usando o Divi (o Divi 5 está pronto para você usar em novos sites, com uma recomendação para migração para sites existentes em breve). Tudo o que você pode fazer para usar funções responsivas reduzirá sua dependência de consultas de mídia, o CSS é uma coisa linda!

Css min () e max (): layouts mais inteligentes com lógica mais simples

Se você já explorou o CLAMP (), está no meio do domínio min () e max ()! Se você se lembra, o CLAMP () usa três valores simultaneamente (min, preferido e max), min e max no grampo () é o mesmo conceito, mas com apenas 1/3 da lógica em um determinado momento.

O que min () e max () fazem?

As funções min () e max () permitem definir dois ou mais valores, com o menor (min) ou o maior (máximo) sendo exibido com base no tamanho da tela.

O "ponto de transição" é determinado respectivamente aos dois valores que você define, então isso é apenas para fins de visualização

min (): sempre escolhe o valor menor

Use min () para impedir que as telas amplas estendam o conteúdo excessivamente. Isso é ideal para layouts que não devem crescer muito em telas grandes, mas devem ter muita flexibilidade para escalar para baixo, à medida que os tamanhos das tela ficam menores.

 width: min(100%, 500px); 

Neste exemplo, a largura do elemento nunca excederá 500px, mas será 100% se estiver nessa marca de 500px.

max (): sempre escolhe o valor maior

Use o max () para impedir que o conteúdo se torne muito estreito ou pequeno, principalmente em telas menores ou quando o conteúdo precisa de um tamanho mínimo para permanecer legível ou funcional. Isso é ideal para layouts que não devem encolher além de um certo ponto em telas pequenas (um valor fixo), mas podem se expandir para acomodar espaços maiores (com um valor relativo).

 width: max(80%, 300px); 

Neste exemplo, a largura do elemento sempre será a opção maior: 80% de seu contêiner ou 300px. Em telas menores ou em recipientes apertados, se 80% calcularem para menos de 300px, o elemento ainda terá pelo menos 300px de largura. Em telas maiores, o elemento se expandirá para 80% da largura do contêiner, mas nunca encolherá abaixo de 300px. Essa abordagem ajuda a garantir que o elemento permaneça utilizável em telas pequenas enquanto dimensiona responsivamente em maiores.

Por que combinar valores relativos e fixos em min () e max ()?

Quando você encontra pela primeira vez min () ou max () no CSS, você pode se perguntar por que eles geralmente combinam valores como uma porcentagem e um pixel. Isso ocorre porque cada tipo de unidade desempenha um papel diferente no design responsivo.

Por exemplo, Min (100px, 200px) sempre resolverá 100px. Está apenas escolhendo o menor dos dois valores fixos. Mas quando você mistura unidades, como min (100%, 500px), você está dizendo ao navegador: "Use o que for menor entre 100% da largura dos pais e 500px". Isso o torna responsivo.

Unidades relativas como %, VW e EM ajustam com base no contexto - se esse é o elemento pai, a viewport ou os tamanhos de fonte herdada. Unidades fixas como PX permanecem constantes no CSS, tornando -as previsíveis.

Combinando valores fixos e relativos, min () e max () permitem criar projetos flexíveis que se adaptem ao mesmo tempo que aplicam limites de tamanho.

Como usar min () e max () com divi

Agora que cobrimos o básico de Min () e Max (), vamos discutir alguns exemplos.

1. Larguras de linha responsivas com menos campos

Você sempre conseguiu definir uma largura e uma largura máxima nos elementos do contêiner com o Divi. Mas, ao abrir funções CSS como Min () e Max (), você pode fazer a mesma coisa, mas usar um campo de design a menos (e produzir um pouco menos de CSS na sua página também).

No Divi, se você for a um elemento (no nosso caso, uma linha), a guia Design e, em seguida, para o dimensionamento , encontrará algumas opções para ajustar a largura. Ao fazer a largura 95% e definir a largura máxima para 900px, você tem algo que fica bem em dispositivos móveis, mas também oferece um layout com muito espaço negativo à esquerda e à direita para exibições de desktop.

É como usar CSS como este para as linhas:

 .container {
width: 95%;
max-width: 900px;
} 

Com as unidades avançadas do Divi 5, agora você tem outra opção mais consolidada. Você pode inserir tudo o que precisa apenas no campo de largura e obter o mesmo resultado.

É como usar este CSS no contêiner da linha:

 .container {
width: min(95%, 900px);
} 

É uma linha de CSS versus duas linhas. Mais importante, requer uma etapa e um valor a menos que você use min () em vez de definir uma largura e a largura máxima. Qualquer uma das opções alcança o mesmo resultado que demonstrou neste vídeo:

Esse caso de uso específico não é tão emocionante, mas mostra o poder de Min () e Max () e como ele pode substituir as declarações CSS mais antigas.

Ao usar min () ou max () para espaçamento, dimensionamento ou bordas (eles podem ser usados ​​em mais campos no divi 5), eu recomendo fortemente que você os defina em predefinições de grupo de opções ou predefinições de elementos. Dessa forma, você pode obter uma escala consistente, não importa onde você os use.

2. ROW preenchimento e largura da borda

Abaixo, tenho um design que merece mais preenchimento interno e uma largura de borda maior à medida que os tamanhos das tela aumentam. Para acomodar isso, usei a função max () para definir a largura da borda direita/esquerda/superior/inferior e preenchimento em uma linha. O CSS seria algo assim:

 .container {
padding: max(10px, 2vw) max(10px, 2vw) max(10px, 2vw) max(10px, 2vw);
border-width: max(5px, 1vw) max(5px, 1vw) max(5px, 1vw) max(5px, 1vw);
} 

Isso significa que a função max () escolherá o que for maior em qualquer situação a que esteja sendo aplicada. O menor preenchimento de cada lado é de 10px e o maior é de 2VW. Da mesma forma, para a largura da borda, a menor de sempre é 5px e a maior é 1VW).

Aqui está a aparência do max () nessa situação no design> espaçamento> preenchimento na fila em divi:

Aqui está como Max () nesta situação se parece em Design> Border>Largura da fronteirana fila em Divi:

Juntos, recebo o efeito de ter menos preenchimento no interior da linha e uma largura de borda mais fina em telas menores. Mas ele aumenta à medida que os tamanhos das tela aumentam e o valor da VW (lembre -se, é um valor relativo) se torna maior que o valor fixo de pixels.

Isso ajuda a maximizar a disponibilidade de telas menores, enquanto as telas mais amplas podem preencher mais o espaço.

3. Seções de herói de altura total

Usando o valor min () na altura de uma seção, você pode criar uma seção de heróis que seja pelo menos uma certa altura, mas se encaixa em 90% da altura da tela cheia (e não mais) usando uma função Min () simples.

 height: min(800px, 90vh) 

Isso tem o efeito de ter uma seção de heróis de altura total, exceto em telas maiores (mais altas), que mostrariam a próxima seção abaixo. Nas configurações de dimensionamento de divi, isso pode ser feito com duas entradas de campo diferentes (largura e largura máxima), mas usando a função min (), podemos obter o mesmo efeito usando apenas um campo no dimensionamento.

Ele mantém a seção de heróis como a principal coisa para a maioria dos tamanhos de tela, mas não se torna muito grande nas poucas instâncias com resoluções de tela mais altas.

4. Dimensionamento de fontes

O uso de tamanhos de MIN ou Max para fontes pode ajudá -lo a obter um dimensionamento mais dinâmico do que os valores de pixels estáticos. Para isso, você deseja usar o max () para ampliar o tamanho da fonte com base nas condições de tamanho da tela. Defina o valor Pixel/REM no tamanho pequeno que você deseja usar e use um valor relativo para escalar para cima.

1Rem é igual ao tamanho da fonte raiz (normalmente 16px, a menos que seja personalizado nos estilos do seu site); Um tamanho de fonte de max (1Rem, 2VW) levaria o maior dos dois valores e nunca seria menor que 16px.

Como você pode ver, nos dispositivos menores, o tamanho da fonte é definido como 1Rem/16px. Em um certo ponto, o valor maior se torna 2VW e escala o tamanho da fonte para cima, aumentando a fonte à medida que os tamanhos das tela aumentam.

Para o dimensionamento da fonte, não recomendo usar o Min ou o Max, mas em vez de Clamp (). O Min/Max fornece apenas escala dinâmica em apenas uma direção e, para se aproximar do efeito do CLAMP (), você precisará definir suas regras de dimensionamento de fonte Min/Max em vários pontos de interrupção (o que é possível, mas muito mais fácil de usar o grampo).

Diferença entre min ()/max () e grampo ()

Você pode entender o CLAMP () como uma combinação de min () e max () com um valor preferido no meio. CLAMP () leva um valor para a tampa mínima, um valor como a tampa máxima e um terceiro valor (no meio) como o valor preferido que determina a inclinação da mudança entre o seu min e o máximo.

Um exemplo:

 font-size: clamp(16px, 4vw, 40px); 

Isso significa que o tamanho da fonte que você está configurando nunca será menor que 16px ou maior que 40px. No entanto, a taxa muda (com base no tamanho da tela) é determinada pelo valor preferido no centro.

Leia meu artigo dedicado sobre o uso do CLAMP () para ver meu gerador de tipografia de fluido preferido que cria suas funções Clamp () para você.

Tente min () e max () com divi 5

Min () e Max () podem não receber tanta atenção quanto Clamp () ou Calc (), mas são ferramentas essenciais para designs responsivos mais inteligentes, mais inteligentes e mais limpos no Divi 5.

Essas funções CSS oferecem maneiras únicas de controlar a capacidade de resposta do seu site. Depois de entender quando usar min () e max (), você se perguntará como gerenciou o design responsivo sem eles. Eles são totalmente suportados nos navegadores modernos, e o Divi os torna implementá -los diretos. O Divi 5 está pronto para ser usado em novos sites.