0

2009-2021 Celula Nerd ®

Brazilian Nerd on planet earth

0
0
Funções do CSS – Como usar calc(), max(), min() e clamp()
>
>
Funções do CSS – Como usar calc(), max(), min() e clamp()

Funções do CSS – Como usar calc(), max(), min() e clamp()

Compartilhe esse conhecimento:

Em CSS existem muitas unidades de medida diferentes. Você tem px e porcentagens, vh, vw, em, rem e outros.

Chegará um momento em que você deseja obter um valor combinando duas ou mais unidades diferentes. O CSS tem uma função que você pode usar para fazer esses cálculos – calc(). E neste tutorial, você aprenderá como funciona.

Existem outras funções do CSS que você pode usar com essas unidades relativas – como max, mine clamp– que, quando confrontadas com valores diferentes, usam a apropriada. Eles são realmente úteis em layouts responsivos e podem ser uma alternativa ao uso de consultas de mídia.

Se você aprender a usá-los adequadamente, poderá evitar a mudança brusca de layout que pode acontecer ao redimensionar uma janela se você usar consultas de mídia e com menos código!

Como usar a calc() da função CSS

A função calc recebe um único parâmetro. Este parâmetro pode ser uma expressão combinando qualquer unidade de comprimento e os quatro operadores matemáticos +, -, /, *.

Você também pode usar parênteses para indicar uma ordem de avaliação diferente das regras de precedência padrão.

Na expressão dentro da calc()função você pode usar variáveis CSS, valores obtidos com attr(), e valores das funções max(), min()e clamp().

A calc() permite calcular um valor a partir de parâmetros complexos. Por exemplo:

div {
    width: calc(100% - 2em);
}

Nota : sempre deixe um espaço de cada lado dos operadores matemáticos.

Como usar a max() da função CSS

A max função aceita uma lista de valores separados por vírgula e retorna o maior. Cada valor também pode ser uma expressão (o que você usar como argumento para a calc() função também pode ser um dos argumentos dessa função).

A função max do CSS pode ser vista como uma forma de determinar um valor mínimo para uma determinada coisa.

Um caso de uso para esta função é tornar um texto responsivo, ao mesmo tempo em que dá um valor mínimo à dimensão.

Veja o exemplo pra função do CSS max() :

h1 {
    font-size: max(1rem, 10vh);
}

Desta forma, o texto terá um décimo da altura da janela de visualização, a menos que a altura da janela de visualização fique muito pequena. O texto sempre terá um font-size de pelo menos 1rem para garantir a legibilidade.

Como usar a min() da função CSS

Da mesma forma que a função max, minpode receber qualquer número de argumentos, incluindo outras funções max, min, ou clampe retornar o menor valor entre eles.

A função min do CSS pode ser vista como determinando um valor máximo .

Por exemplo, digamos que você está criando um formulário e deseja que ele seja responsivo enquanto a largura da tela muda. Você vai querer dar a ele uma largura máxima para evitar aquela aparência esticada horizontalmente que pode acontecer nas telas maiores.

Veja o exemplo pra função do CSS min() :

.form {
    width: min(600px, 90vw);
}

Sua página terá uma largura igual a 90% da largura da janela de visualização, ou 600px de largura, o que for menor. Portanto, se a largura da janela de visualização for maior que ~670px, o formulário não se estenderá horizontalmente.

Como usar a clamp() da função CSS

A função de fixação fixa um valor entre um limite superior e inferior. Seleciona um valor em um intervalo com limites definidos.

A função clamp() assume três valores. O primeiro será o valor mínimo, o segundo o valor preferencial e o terceiro o valor máximo.

A função clamp devolverá o valor preferido, a menos que seja menor que o valor mínimo (nesse caso devolverá o valor mínimo) ou se for maior que o valor máximo, nesse caso devolverá o valor máximo .

Você pode usar clamppara que os elementos de layout sejam redimensionados de forma responsiva dentro de um intervalo.

h1 {
    font-size: clamp(1rem, 10vw, 2rem);
}
div {
    padding: clamp(10px, 6vw, 50px);
    width: clamp(140px, 90vw, 600px);
}

O MDN tem informações mais detalhadas sobre todas essas funções:

E com isso, você teve uma visão geral dessas quatro funções maravilhosas do CSS. Você aprendeu o suficiente para começar a usá-los, então vá lá e divirta-se!

Compartilhe esse conhecimento:

Digite o que procura e aperte enter

Carrinho

Nenhum produto no carrinho.