Unidades de dimensionamento

The CSS Podcast - 008: Sizing Units

A Web é um meio responsivo, mas às vezes você quer controlar as dimensões para melhorar a qualidade geral da interface. Um bom exemplo disso é limitar o comprimento das linhas para melhorar a legibilidade. Como você faria isso em um meio flexível como a Web?

Nesse caso, é possível usar uma unidade ch, que é igual à largura de um caractere "0" na fonte renderizada no tamanho calculado. Essa unidade permite limitar a largura do texto com uma unidade projetada para dimensionar o texto, o que, por sua vez, permite um controle previsível independente do tamanho do texto. A unidade ch é uma das poucas unidades úteis para contextos específicos, como este exemplo.

Numbers

Os números são usados para definir opacity, line-height e até mesmo para valores de canal de cor em rgb. Os números são inteiros sem unidade (1, 2, 3, 100) e decimais (0,1, 0,2, 0,3).

Os números têm significado dependendo do contexto. Por exemplo, ao definir line-height, um número representa uma proporção se você o definir sem uma unidade de suporte:

p {
  font-size: 24px;
  line-height: 1.5;
}

Neste exemplo, 1.5 é igual a 150% do tamanho da fonte em pixels computado do elemento p. Isso significa que, se o p tiver um font-size de 24px, a altura da linha será calculada como 36px.

Também é possível usar números nos seguintes locais:

• Ao definir valores para filtros: filter: sepia(0.5) aplica um filtro de sépia 50% ao elemento.
• Ao definir a opacidade: opacity: 0.5 aplica uma opacidade 50%.
• Em canais de cores: rgb(50, 50, 50), em que os valores 0 a 255 são aceitáveis para definir um valor de cor. Confira a lição sobre cores.
• Para transformar um elemento: transform: scale(1.2) dimensiona o elemento em 120% do tamanho inicial.

Porcentagens

Ao usar uma porcentagem no CSS, você precisa saber como ela é calculada. Por exemplo, width é calculado como uma porcentagem da largura disponível no elemento pai.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; 
}

No exemplo acima, a largura de div p é 150px, supondo que o layout use o box-sizing: content-box padrão.

Se você definir margin ou padding como uma porcentagem, eles serão uma parte da largura do elemento pai, independentemente da direção.

div {
  width: 300px;
  height: 100px;
}

div p {
  margin-top: 50%; /* calculated: 150px */
  padding-left: 50%; /* calculated: 150px */
}

No snippet acima, margin-top e padding-left vão ser calculados como 150px.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; /* calculated: 150px */
  transform: translateX(10%); /* calculated: 15px */
}

Se você definir um valor transform como uma porcentagem, ele será baseado no elemento com o conjunto de transformação. Neste exemplo, a p tem um valor translateX de 10% e um width de 50%. Primeiro, calcule qual será a largura: 150px, porque ela é 50% da largura do elemento pai. Depois, pegue 10% de 150px, que é 15px.

Dimensões e comprimentos

Se você anexar uma unidade a um número, ela se tornará uma dimensão. Por exemplo, 1rem é uma dimensão. Nesse contexto, a unidade anexada a um número é chamada de token de dimensão nas especificações. As medidas de comprimento são dimensões que se referem à distância e podem ser absolutas ou relativas.

Comprimentos absolutos

Todas as medidas absolutas são resolvidas com a mesma base, tornando-as previsíveis em qualquer lugar do CSS. Por exemplo, se você usar cm para dimensionar seu elemento e, em seguida, imprimir, ele será preciso se você o comparar com uma régua.

div {
  width: 10cm;
  height: 5cm;
  background: black;
}

Se você imprimir esta página, o div será impresso como um retângulo preto de 10 x 5 cm. O CSS é usado não apenas para conteúdo digital, mas também para dar estilo a conteúdo impresso. As medidas absolutas podem ser muito úteis ao projetar para impressão.

Comprimentos relativos

Uma comprimento relativo é calculado em relação a um valor de base, de forma semelhante a uma porcentagem. A diferença entre esses valores e as porcentagens é que você pode dimensionar elementos de forma contextual. Isso significa que o CSS tem unidades como ch, que usam o tamanho do texto como base e vw, que se baseia na largura da janela de visualização (a janela do navegador). As medidas relativas são especialmente úteis na Web devido à natureza responsiva.

Unidades relativas ao tamanho da fonte

O CSS oferece unidades úteis que são relativas ao tamanho dos elementos da tipografia renderizada, como o tamanho do texto (unidades em) ou a largura dos caracteres das famílias tipográficas (unidades ch).

Unidades relativas à janela de visualização

Você pode usar as dimensões da viewport (janela do navegador) como base relativa. Essas unidades ocupam o espaço disponível da janela de visualização.

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

Neste exemplo, o div será 10% da largura da janela de visualização porque 1vw é 1% da largura da janela de visualização. O elemento p tem um max-width de 60ch, o que significa que ele não pode exceder a largura de 60 caracteres "0" na fonte e no tamanho calculados.

Unidades diversas

Há outras unidades especificadas para lidar com tipos específicos de valores.

Unidades de ângulo

No módulo de cores, analisamos unidades de ângulo, que são úteis para definir valores de grau, como a tonalidade em hsl. Elas também são úteis para girar elementos dentro de funções de transformação.

div {
  width: 150px;
  height: 150px;
  transform: rotate(60deg);
}

Usando a unidade de ângulo deg, é possível girar uma div em 90° no eixo central.

div {
  background-image: url('a-low-resolution-image.jpg');
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  div {
    background-image: url('a-high-resolution-image.jpg');
  }
}

Unidades de resolução

No exemplo anterior, o valor de min-resolution é 192dpi. A unidade dpi significa pontos por polegada. Um contexto útil para isso é detectar telas de resolução muito alta, como telas Retina em uma consulta de mídia e exibir uma imagem de resolução mais alta.

Teste seu conhecimento

Teste seus conhecimentos sobre dimensionamento

Recursos

• Valores e unidades de especificação do CSS, nível 4
• Tamanho e unidades no MDN
• All About Ems (em inglês)
• Explicação sobre porcentagens