Unidades e tamanho

No ateliê, o cartaz precisa caber na mesa e na tela. Unidades CSS medem comprimento, ângulo, tempo e porcentagem. Escolher a unidade certa evita tipografia rígida e layouts quebrados.

O exemplo deste capítulo é 28-unidades, no pacote que acompanha o volume. Troque px por rem no título, preveja o zoom, recarregue e confira.

O que você vai aprender

• Distinguir comprimento absoluto e relativo.
• Usar px, em, rem, %, vh/vw e ch com intenção.
• Entender porcentagem em relação ao pai.
• Evitar misturar unidades sem prever o efeito.
• Dimensionar texto pensando em acessibilidade (zoom).

Números e porcentagens

Algumas propriedades aceitam número puro (opacity: 0.8, line-height: 1.5). Porcentagem depende da propriedade: em width, costuma ser a largura do contendo; em font-size, é relativa ao font-size do pai.

.folha {
  width: 80%;
  max-width: 40rem;
}

.lead {
  font-size: 125%; /* 1.25 × fonte do pai */
}

Absolutas e relativas

Absolutas (não mudam com fonte do usuário): px, cm, mm, in, pt, pc. Na tela, px CSS é a mais comum.

Relativas: em (fonte do elemento), rem (fonte da raiz), ch (largura do “0”), ex, viewport (vw, vh, vmin, vmax), e unidades de container (depois, capítulo 57).

html {
  font-size: 100%; /* respeita preferência do usuário */
}

h1 {
  font-size: 2rem;
  margin-block: 0.5em;
}

.cartaz {
  width: min(100%, 36rem);
  padding: 1.5rem;
}

Ângulos e outras

deg, rad, turn em gradientes e transforms. Tempo (s, ms) entra em animações (capítulos futuras).

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Unidades — Laboratório Belavista</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main class="folha">
      <h1>Medidas do ateliê</h1>
      <p class="lead">Um parágrafo com medida relativa.</p>
    </main>
  </body>
</html>

Erro comum: fixar todo o site em px no html (font-size: 12px) e impedir que o zoom/preferência do usuário escale bem. Prefira rem a partir da raiz em % ou default.

Critério para avançar

Você avança se: explica em versus rem; usa % numa largura com max-width em rem; testa zoom a 200% no exemplo.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. padding: 1em em um título com font-size: 2rem: o em olha para quem?
2. Por que max-width: 40rem ajuda em telas largas?
3. width: 50% é metade da viewport?

Respostas comentadas

1. Para o font-size computado daquele título (2rem), não da raiz diretamente.
2. Limita a linha de leitura; a folha não estica sem fim no monitor ultrawide.
3. Não necessariamente. É metade da largura do bloco contendo, que pode não ser a viewport.