Dominando Web Design Responsivo com Funções Matemáticas CSS

Matemática é boa, matemática é ótima, mas você quer gastar seu tempo fazendo cálculos quando sua folha de estilo pode fazer isso por você?

CSS vem com três funções matemáticas úteis que mudarão a maneira como você projeta seus sites. Mostraremos como e por que você deve usá-los.

Introdução da matemática ao CSS

CSS é principalmente declarativo, mas as revisões introduziram funções na linguagem. Existem agora muitas funções na especificação, e três das mais simples matemáticas podem ser muito úteis: calc, max e min.

Você pode usar este exemplo simples do CodePen para ajudar a seguir junto com o guia.

CSS calc() Função Matemática

A função CSS calc() realiza um cálculo simples e usa o resultado como um valor de propriedade. Isso significa que você pode atribuir valores dinâmicos a propriedades como altura e largura, tudo sem Consultas CSS @media.

Esta função suporta adição (+), multiplicação (*), subtração (-) e divisão (/) com um único operador.

Exemplo: criação de espaçamento uniforme entre tamanhos de tela

Fazer com que uma página da Web tenha a mesma aparência em tamanhos diferentes pode ser difícil, mesmo se você usar unidades CSS dinâmicas como vw e %. A função CSS calc() muda isso.

Como você pode ver na imagem acima, a barra de título que atravessa a tela tem espaçamento diferente dependendo do tamanho da tela. Isso porque definimos a largura para 80vw, definindo o espaçamento para 20vw; um valor variável.

Se usarmos calc() em vez disso, podemos definir o espaçamento para ser o mesmo em qualquer tamanho de tela. A propriedade que usamos para isso se parece com isso:

largura: calc (100vw - 400px);

Isso define a largura da nossa barra de título para 400px menor que a largura da página, criando um espaçamento uniforme, independentemente do tamanho da tela.

Função matemática CSS max()

A função CSS max() seleciona o valor mais alto de um pool para adicionar um valor a uma propriedade CSS. Você pode adicionar quantos valores potenciais desejar, com cada um separado por uma vírgula, mas usará apenas o mais alto.

Exemplo: restringindo a altura da barra de navegação

Um dos principais desafios que vêm com o web design responsivo é a orientação. Um site que funciona em um grande monitor de computador de retrato também precisa ter uma boa aparência em uma tela móvel de retrato menor.

Isso pode fazer com que o valor de uma propriedade pareça ótimo no computador e ruim no celular, como mostra a imagem acima. Nossa barra de navegação tem uma altura definida de 10vh, mas isso faz com que a barra pareça fina em dispositivos desktop.

Podemos usar a função CSS max() para resolver este problema:

altura: max (10vh, 80px);

Ao adicionar uma regra como esta, podemos definir uma altura mínima de 80px para nossa barra de navegação, mantendo o valor de 10vh se for maior.

Função matemática CSS min()

A função min() é como a função max(), mas escolhe o valor mais baixo de um pool para usar como valor da propriedade.

Exemplo: definir um tamanho máximo de texto

Quer você use um valor dinâmico ou não, obter o tamanho do texto em todas as plataformas pode ser complicado. Podemos usar a função CSS min() para definir dois ou mais valores de propriedade em potencial para o tamanho do texto do cabeçalho principal, e usará o menor.

Usando um tamanho da fonte: 10vh; A propriedade no texto do cabeçalho principal em nosso exemplo faz com que o texto pareça ótimo no desktop, mas muito grande em dispositivos móveis.

Para mudar isso, você pode usar a função CSS min() para fornecer dimensionamento alternativo:

tamanho da fonte: min (10vh, 10vw);

Este exemplo funciona porque os monitores móveis são altos e finos, enquanto os monitores de desktop são largos e curtos. Isso significa que a unidade de largura de visualização (vw) é menor em dispositivos móveis do que em computadores.

Usando matemática para web design responsivo

As funções matemáticas que vêm pré-empacotadas com CSS oferecem uma maneira única de produzir sites responsivos com facilidade. Você só precisa configurá-los corretamente para começar.

Claro, existem outros métodos e funções CSS que você pode usar para criar um site que pareça ótimo em todas as plataformas.

Como construir uma barra de navegação responsiva usando HTML e CSS

Leia a seguir

Sobre o autor