Editor X: unidades de medida

Com o design responsivo, você não se prende mais ao pixel. Use uma variedade de unidades de medida diferentes para definir a largura e a altura dos elementos. Entender quando usar cada medida permite que você defina o tamanho do seu elemento de uma maneira que funcione para o seu design.

O cálculo é uma ferramenta útil quando você precisa dimensionar com precisão um elemento ao usar unidades de medida fluidas. Usando princípios matemáticos, você pode escrever uma "fórmula" que determina a largura ou a altura de um elemento. Você pode até combinar diferentes medidas nesse cálculo (por exemplo: vh e px).

Por exemplo, use o cálculo para criar um cabeçalho (100px) e uma seção que, juntos, ocupam a altura exata da janela de visualização (100vh) em cada tamanho de tela. Você pode definir a altura da seção para (100vh - 100px), para que o cabeçalho seja sempre levado em consideração no cálculo (100px). 

Pixels (px) são a unidade de medida mais comumente usada. Eles garantem que o tamanho de um elemento seja sempre o mesmo, independentemente do tamanho da tela.

A unidade de porcentagem é uma unidade fluida muito útil que é popular em design responsivo. Ao definir a largura em %, o tamanho é determinado por uma porcentagem da largura do elemento pai. Se a altura estiver definida como %, o tamanho será retirado da altura do elemento pai.

Janela de visualização é o tamanho do navegador no qual o site é exibido. Vw e vh são relativos à largura e à altura da janela de visualização.

Ao usar unidades de medida fluidas, você pode definir um valor mínimo ou máximo para a largura e/ou altura. Por exemplo, definir a largura mínima de um elemento de 400px, significa que o elemento nunca é exibido menor do que isso.

Quando um elemento é definido como tamanho Auto, ele é determinado por outros fatores e os resultados podem variar. Por exemplo, a altura e a largura de uma imagem esticada é sempre definida como Auto, pois preenche o espaço disponível em qualquer tamanho de tela.

Conteúdo máx. é uma unidade de tamanho avançado que define a largura de um elemento. Você pode aplicar essa unidade a elementos de caixa flexível (ex.: contêineres, layouters, repetidores), assim como seções verticais, elementos de texto e botões.

Ao usar o Conteúdo máx. para definir a largura de um elemento, ele é determinado pelo tamanho de seus elementos filhos - não importa o tamanho do conteúdo ou quantas palavras ele contém. O elemento pai se ajusta ao tamanho máximo do conteúdo dos filhos.