Unidades de dimensionamento

Podcast do CSS - 008: Dimensionamento de unidades

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?

Para este caso, é possível usar uma unidade ch, que é igual à largura de um "0" na fonte renderizada no tamanho calculado. Essa unidade permite limitar a largura do texto com uma unidade projetada para dimensionar texto, o que, por sua vez, permite um controle previsível, independentemente do tamanho do texto. A unidade ch é uma das unidades úteis para contextos específicos, como neste 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 números 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. Consulte 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 da div p é 150px, supondo que o layout use o box-sizing: content-box padrão.

Se você definir margin ou padding como porcentagem, elas 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 serão calculados como 150px.

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

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

Se você definir um valor de transform como porcentagem, ela é baseada 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 nas especificações como um token de dimensão. Os comprimentos são dimensões que se referem à distância e podem ser absolutos ou relativos.

Comprimentos absolutos

Todos os comprimentos absolutos têm a mesma base, o que os torna previsíveis onde quer que sejam usados em seu CSS. Por exemplo, se você usar cm para dimensionar o elemento e depois exibir, ela deverá ser precisa se você a comparar com uma régua.

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

Ao imprimir esta página, a div seria exibida como um retângulo preto de 10 x 5 cm. Lembre-se de que o CSS não é apenas usado para conteúdo digital, mas também para estilizar conteúdo impresso. comprimentos absolutos podem ser realmente úteis ao projetar para impressão.

Unidade Nome É equivalente a
cm Centímetros 1 cm = 96 px/2,54
mm Milímetros 1 mm = 1/10 de 1 cm
Q Quartos de milímetro 1Q = 1/40 de 1 cm
in Polegadas 1 pol. = 2,54 cm = 96 px
pc Picas 1pc = 1/6 de 1in
pt Pontos 1 pt = 1/72 de 1 pol.
px Pixels 1 pixel = 1/96 de 1 polegada

Durações relativas

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 é baseada na largura da janela de visualização (a janela do navegador). Os comprimentos relativos são particularmente úteis na Web devido à sua 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).

unidade em relação a:
em Em relação ao tamanho da fonte, Ou seja, o tamanho 1,5em será 50% maior que o tamanho de fonte calculado base do pai. (Historicamente, a altura da letra maiúscula "M").
exemplo Heurística para determinar se a altura x, uma letra "x" ou ".5em" será usada no tamanho de fonte calculado atual do elemento.
cap Altura das letras maiúsculas no tamanho da fonte computada atual do elemento.
ch Média de avanço de caracteres de um glifo estreito na fonte do elemento (representado pelo glifo "0").
ic Médio avanço de caractere de um glifo de largura total na fonte do elemento, representado por "水" (Ideograma de água CJK, U+6C34).
rem Tamanho da fonte do elemento raiz (padrão: 16 px).
lh Altura da linha do elemento.
rlh (em inglês) Altura da linha do elemento raiz.
O texto, o CSS é 10 vezes melhor com rótulos para altura de ascendentes, altura de descendentes e altura x. A altura x representa 1ex e o 0 representa 1ch

Unidades relativas à janela de visualização

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

unidade em relação a
vw 1% da largura da janela de visualização. As pessoas usam essa unidade para fazer truques legais de fontes, como redimensionar a fonte do cabeçalho com base na largura da página para que o usuário redimensione a fonte também será redimensionada.
vh (link em inglês) 1% da altura da janela de visualização. Você pode usar isso para organizar itens em uma interface, se você tiver uma barra de ferramentas de rodapé, por exemplo.
vi 1% do tamanho da janela de visualização no eixo inline do elemento raiz. Eixo refere-se aos modos de gravação. Em modos de escrita horizontal, como o inglês, o eixo em linha é horizontal. Em modos de escrita vertical, como algumas famílias tipográficas japonesas, o eixo em linha é executado de cima para baixo.
vb 1% do tamanho da janela de visualização no eixo de bloco do elemento raiz. Para o eixo do bloco, seria a direção do idioma. Idiomas LTR, como o inglês, teriam um eixo de bloco vertical, já que os leitores em inglês analisam a página de cima para baixo. O modo de escrita vertical tem um eixo de bloco horizontal.
vmin (em inglês) 1% da dimensão menor da janela de visualização.
vmax 1% da dimensão maior da janela de visualização.
div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

Neste exemplo, 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 (link em inglês), analisamos unidades de ângulo, que são úteis para definir valores de grau, como o matiz em hsl. Elas também são úteis para girar elementos em 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 a tela Retina em uma consulta de mídia e a exibição de uma imagem de resolução mais alta.

Teste seu conhecimento

Teste seus conhecimentos sobre dimensionamento

Quais das opções a seguir são dimensões válidas?

cm
Centímetros, uma dimensão absoluta válida.
iu
A interface do usuário não é uma dimensão no CSS.
em
Polegadas, uma dimensão absoluta válida.
Dia 8
Não é uma dimensão CSS
px
Pixels, uma dimensão absoluta válida.
ch
Unidades de caracteres, uma dimensão relativa válida.
ux
A experiência do usuário não é uma dimensão no CSS.
em
Letra "M" , uma dimensão relativa válida.
ex
Letras "x", uma dimensão relativa válida.

Qual é a diferença entre unidades absolutas e relativas?

Valores absolutos não podem mudar, mas as unidades relativas podem
Valores absolutos podem mudar, mas não a base usada para o cálculo.
Um comprimento absoluto é calculado em relação a um único valor de base compartilhado, em que uma unidade relativa é comparada a um valor de base que pode mudar.
As unidades relativas são mais adaptáveis e fluidas devido à consciência contextual, mas as unidades absolutas têm uma força e previsibilidade que podem ser fundamentais para determinados designs.

As unidades de janela de visualização são absolutas.

Verdadeiro
Eles podem parecer absolutos, mas são relativos a uma viewport, que pode ser um iframe ou uma visualização da Web, e não sempre representam o tamanho da tela de um dispositivo.
Falso
Eles são relativos à janela do documento em que foram criados, que pode ou não ser a mesma que a tela do dispositivo.

Recursos