Dimensionamento e unidades

docs.scrimba.com

Você define um tamanho de fonte em pixels, publica a página, e um leitor que aumentou o tamanho do texto do navegador para se sentir confortável não vê nenhuma mudança. Você dá a um card uma largura fixa e ele transborda em um telefone. Ambos vêm para a mesma pergunta: quando você digita um número em CSS, esse número é medido contra o quê? Algumas unidades são fixas, algumas escalam para uma fonte, algumas escalam para o pai, e algumas escalam para a tela. Depois de saber qual é qual, você para de adivinhar e começa a escolher a unidade que faz o trabalho.

Unidades absolutas vs relativas

As unidades CSS se dividem em duas famílias. Uma unidade absoluta é um tamanho fixo que nunca muda: px (um pixel) é aquele que você encontrará em todos os lugares. Uma unidade relativa é um tamanho que escala para algo mais, como o tamanho da fonte do leitor ou a largura da tela.

Pense em medir uma sala. Centímetros são absolutos: uma parede tem 400cm quer você seja alto ou baixo. "Três dos meus passos" é relativo: depende de cujos pés estão caminhando. Unidades absolutas dão a você controle exato; unidades relativas deixam a página se adaptar à pessoa que a está vendo.

Essa adaptação importa. Alguns leitores definem um tamanho de texto padrão maior porque é mais fácil para seus olhos. Se você dimensionar seu texto em uma unidade relativa, sua configuração se mantém e a página cresce para atendê-los. Se você a bloquear em pixels, ela fica no lugar e os ignora.

Cada comprimento em CSS é absoluto ou relativo, e a diferença decide se seu layout pode se adaptar. Uma unidade absoluta se resolve para um tamanho fixo independentemente do contexto: px é a única unidade absoluta que você usará na prática, pois cm, pt e o resto visam impressão. Uma unidade relativa se resolve contra uma referência, e qual referência depende da unidade: rem e em escalam para um tamanho de fonte, % escala para o pai, vw e vh escalam para a visualização.

A razão para preferir unidades relativas para a maioria do dimensionamento é acessibilidade e responsividade. Quando um leitor aumenta o tamanho de fonte padrão do navegador, qualquer coisa dimensionada em rem cresce com ele, enquanto qualquer coisa fixa em px fica fixa e pode quebrar o layout ao seu redor. O mesmo ocorre em tamanhos de tela: unidades relativas deixam uma folha de estilo se adequar a um telefone e a um monitor, que é a base para design responsivo.

A unidade que você escolhe é uma decisão sobre o que seu número está ancorado, e esse âncora é o que determina se o layout responde ao leitor ou o ignora. Uma unidade absoluta se resolve para o mesmo comprimento computado em cada contexto. Em CSS de tela, é efetivamente apenas px: as unidades físicas (cm, mm, in, pt, pc) são definidas em relação ao pixel de qualquer forma (1in é 96px por definição) e pertencem a folhas de estilo de impressão. Uma unidade relativa se resolve contra uma referência que pode mudar, o que é o que a deixa se adaptar.

A referência é todo o jogo, então vale a pena nomear o que cada unidade relativa aponta. rem e em são relativas à fonte: elas se resolvem contra um tamanho de fonte (do raiz ou do elemento). % é relativa ao pai para a maioria das propriedades: uma largura em porcentagem é uma fração da largura do bloco de contenção. vw e vh são relativas à visualização: uma fração da visualização do navegador (a área visível da página). A regra prática sai disso: dimensione tipo e layout em unidades relativas, mantenha px para o que não deve escalar. Um leitor que define um tamanho de fonte padrão maior, ou amplia a página, move a referência para a qual as unidades relativas apontam, então a página cresce para atendê-los; um valor px não tem referência para se mover e fica no lugar, que é a falha de acessibilidade que você está tentando evitar.

JunoUnidades absolutas vs relativas Unidades absolutas como px são um tamanho fixo que nunca muda. Unidades relativas escalam para algo mais, como o tamanho da fonte do leitor ou a largura da tela. Unidades relativas deixam a página se adaptar à pessoa que a está vendo, e é por isso que são importantes para leitores que definem um tamanho de texto maior.

JunoUnidades absolutas vs relativaspx é a única unidade absoluta que você realmente usará; todo o resto escala para uma referência. rem e em escalam para uma fonte, % para o pai, vw e vh para a visualização. Busque unidades relativas para que a página cresça quando um leitor aumenta seu tamanho de fonte padrão, em vez de ignorá-los.

JunoUnidades absolutas vs relativas Cada unidade é um número mais uma âncora, e a âncora decide se o layout pode responder. px não tem âncora para se mover, então nunca se adapta; rem e em se ancoram em uma fonte, % ao pai, vw e vh à visualização. Dimensione tipo e layout em unidades relativas e mantenha px para as partes que devem permanecer fixas.

Pixels e quando eles estão bem

Um pixel (px) é uma pequena unidade fixa de comprimento. É a mais direta para raciocinar, porque 16px é sempre 16px. Isso torna um bom ajuste para pequenas coisas que devem permanecer do mesmo tamanho não importa o quê: a espessura de uma borda, um pequeno canto arredondado, um ícone fixo.

.card {
  border: 1px solid #ccc;      /* uma borda filete, sempre 1px */
  border-radius: 8px;          /* um canto arredondado fixo */
}

A pegadinha é que um pixel não se importa com o leitor. Se alguém definou seu navegador para mostrar texto maior, um cabeçalho que você travou em 24px fica em 24px e ignora sua escolha. É por isso que px é uma boa escolha para bordas e pequenos detalhes, mas não a unidade que você quer para texto.

px é a unidade para buscar quando você quer um comprimento que fica no lugar: bordas, divisores filete, pequenos raios fixos, e o ícone ocasional que não deve escalar. Para esses, sua fixidez é o ponto. Uma borda 1px que crescesse com o tamanho da fonte do leitor pareceria errada, então travá-la é correto.

.card {
  border: 1px solid #ccc;      /* fica um filete independentemente do tamanho da fonte */
  border-radius: 8px;
  padding: 1rem;               /* mas o espaçamento interno escala com o tipo */
}

A desvantagem é a razão para não dimensionar texto nele. Um leitor pode definir um tamanho de fonte padrão maior em seu navegador para conforto ou acessibilidade, e px substitui isso: um cabeçalho font-size: 18px é renderizado em 18 pixels quer seu padrão seja 16 ou 24. Então use px para os detalhes fixos e mude para uma unidade relativa à fonte para qualquer coisa que deva honrar as configurações do leitor, que a próxima seção cobre.

O px do CSS não é um pixel de dispositivo físico; é um pixel de referência, uma unidade angular que o navegador escala para que 1px seja lido em um tamanho aparente consistente em densidades de tela. Em uma exibição de alta densidade, um pixel CSS mapeia para vários pixels de dispositivo, e é por isso que uma borda 1px permanece um filete nítido em vez de desaparecer. Essa fixidez torna px a escolha certa para coisas que não devem rastrear o tamanho da fonte do leitor: bordas, divisores 1px, pequenos raios, deslocamentos box-shadow e detalhes filete.

.card {
  border: 1px solid #ccc;      /* filete fixo; escaloná-lo pareceria errado */
  border-radius: 8px;
  padding: 1rem;               /* espaçamento interno rastreia o tipo em vez disso */
}

O modo de falha é dimensionar texto em px. Definir font-size em pixels substitui o tamanho de fonte padrão do leitor, o tamanho base que eles podem definir nas preferências do navegador (geralmente para baixa visão), porque um valor px não tem referência para essa preferência dimensionar. Note a distinção do zoom de página: navegadores modernos dimensionam px em zoom de página completa, então a reivindicação antiga de "px ignora zoom" é desatualizada, mas um tamanho de fonte px ainda ignora a configuração default-font-size especificamente, e essa configuração é o caminho de acessibilidade que muitos leitores dependem. A regra que se mantém: px para detalhe fixo, uma unidade relativa à fonte para qualquer coisa que um leitor deva poder aumentar, especialmente texto do corpo e tipografia.

JunoPixels e quando eles estão bem Um pixel (px) é um tamanho fixo, então 16px é sempre 16px. Isso torna um bom ajuste para pequenas coisas que devem ficar no lugar, como uma borda 1px ou um pequeno canto arredondado. A compensação é que px ignora um leitor que definou texto maior, então não é a unidade que você quer para as palavras na página.

JunoPixels e quando eles estão bem Use px quando um comprimento não deve escalar: bordas, divisores filete, pequenos raios. Sua fixidez é a característica ali. A desvantagem aparece com texto, onde um tamanho de fonte px substitui um padrão maior do leitor, então mantenha px para os detalhes fixos e dimensione texto em uma unidade relativa à fonte.

JunoPixels e quando eles estão bem O px do CSS é um pixel de referência que o navegador mantém visualmente consistente em densidades de tela, e é por isso que uma borda 1px permanece um filete limpo. Isso torna certo para detalhe fixo como bordas e sombras. É errado para texto, porque um tamanho de fonte px ignora a configuração default-font-size do leitor, então dimensione tipo em rem em vez disso.

em e rem

Duas unidades relativas escalam para um tamanho de fonte: em e rem. A que você deve buscar é rem. Ela mede contra o tamanho da fonte raiz da página, que é o tamanho de texto base definido em todo o documento (16px por padrão). Então 1rem é 16px, 1.5rem é 24px, e 2rem é 32px.

h1 {
  font-size: 2rem;             /* 2 x 16px = 32px */
}
p {
  font-size: 1rem;             /* 16px, o tamanho base */
  margin-bottom: 1.5rem;       /* 24px de espaço abaixo */
}

Porque rem está ligada a esse tamanho raiz, é previsível: 1.5rem significa a mesma coisa em toda parte da página. E quando um leitor aumenta seu tamanho de fonte padrão, tudo dimensionado em rem cresce junto. A outra unidade, em, escala para o tamanho da fonte do elemento em vez disso, o que pode ficar confuso, então comece com rem e você raramente será pego desprevenido.

em e rem são ambas relativas à fonte, e a diferença é qual tamanho de fonte elas medem. rem é relativa ao raiz tamanho da fonte, o tamanho definido no elemento <html> (16px por padrão), então 1.5rem se resolve para o mesmo comprimento em qualquer lugar na página. em é relativa ao tamanho de fonte do próprio elemento, então seu valor muda dependendo de onde você a usa.

h1 {
  font-size: 2rem;             /* sempre 2 x o raiz = 32px */
}
.card {
  font-size: 1.125rem;         /* 18px */
  padding: 1em;                /* 1 x o tamanho desta elemento de 18px = 18px */
}

A recomendação é dimensionar em rem e usar em apenas para dimensionamento ligado ao tamanho de fonte local. em funciona bem para coisas que devem rastrear seu próprio texto, como preenchimento dentro de um botão que cresce com o tamanho da fonte do botão. Mas em se combina através de elementos aninhados, o que surpreende as pessoas, então mantenha-a para esses casos locais e deixe rem carregar seu dimensionamento geral e tipografia.

em e rem são ambas relativas à fonte, o que significa que elas se resolvem contra um tamanho de fonte em vez de um comprimento fixo, e a distinção é a referência. rem (em raiz) se resolve contra o tamanho de fonte raiz, o font-size computado no elemento <html>, então é uma única referência global: 1.25rem é o mesmo comprimento computado em um cabeçalho, rodapé, ou seis níveis de profundidade. em se resolve contra o tamanho de fonte do elemento atual, então seu significado é local e se move com contexto.

Essa referência local é onde em se combina. Porque o em de um filho é medido contra seu próprio font-size, e font-size em si herda, definir font-size em em em elementos aninhados multiplica em cada nível:

/* Cada nível de lista define font-size em em, então tamanhos se acumulam multiplicativamente */
ul { font-size: 0.9em; }       /* 0.9 x pai */

/* Um raiz de 16px se torna:
   profundidade 1 -> 14.4px
   profundidade 2 -> 12.96px  (0.9 x 0.9)
   profundidade 3 -> 11.66px  (0.9 x 0.9 x 0.9)  */

Ninguém pediu por texto que encolhe quanto mais profundo se aninha; esse é em se combinando, e é o principal argumento para buscar rem por padrão. A compensação vai para o outro lado para dimensionamento local de componentes, onde você quer um valor rastrear o tamanho de fonte do próprio elemento: um botão cujo preenchimento é 0.75em e borda-raio 0.5em redimensiona como uma unidade quando você aumenta seu font-size, o que rem não pode fazer porque ignora o tamanho local. Então a divisão que funciona é rem para qualquer coisa que deva permanecer estável contra o raiz, em para espaçamento e raios que devem escalar com o tamanho de fonte do próprio elemento.

Para dimensionamento fluido, min(), max(), e clamp() deixam um comprimento fluxo entre limites. min(a, b) escolhe o menor na visualização atual, max(a, b) o maior, e clamp(min, preferred, max) mantém um valor preferido entre um piso e um teto. Um padrão comum para um cabeçalho é font-size: clamp(1.75rem, 4vw, 3rem): ele escala com a visualização (4vw) mas nunca cai abaixo de 1.75rem ou excede 3rem, então o tipo permanece fluido sem uma pilha de pontos de parada. Dimensionar tipo em rem (ou clamp() limitado a rem) também respeita zoom do usuário e o tamanho de fonte padrão do leitor, porque esses ajustam o raiz contra o qual rem se resolve, enquanto um valor vw bruto rastreia apenas a visualização e ignora a preferência de fonte do leitor. É por isso que o piso e teto rem em um clamp() importa: eles mantêm a referência acessível na expressão.

Junoem e remrem e em ambas escalam para um tamanho de fonte, e a que você deve começar é rem. Ela mede contra o tamanho raiz da página, que é 16px por padrão, então 1.5rem é 24px e significa a mesma coisa em toda parte. em escala para o tamanho de fonte do próprio elemento em vez disso, o que pode ficar confuso, então busque rem primeiro.

Junoem e rem Ambas são relativas à fonte: rem mede contra o tamanho de fonte raiz, então é estável em todo lugar, enquanto em mede contra o tamanho de fonte do próprio elemento, então muda com contexto e se combina quando aninhada. Dimensione em rem por padrão e mantenha em para espaçamento que deva rastrear o tamanho de fonte do seu próprio elemento, como preenchimento dentro de um botão.

Junoem e remrem se ancora ao tamanho de fonte raiz para uma única referência estável; em se ancora ao tamanho do elemento em si e se multiplica através de aninhamento, e é por isso que tamanhos de fonte em profundamente aninhados derivam. Use rem para dimensionamento geral e em para dimensionamento local de componentes que devem seguir seu próprio tipo. Para tipo fluido, clamp(1.75rem, 4vw, 3rem) fluxo com a visualização enquanto o piso e teto rem mantêm respeito para zoom do usuário e configurações de fonte.

Porcentagens

Uma porcentagem (%) dimensiona um elemento contra seu pai. Para largura, width: 50% significa metade da largura da caixa em que o elemento fica, seja qual for essa largura.

.sidebar {
  width: 25%;                  /* um quarto da largura do pai */
}
.content {
  width: 75%;                  /* os três quartos restantes */
}

Isso é o que torna um layout fluido: porque as larguras são frações do pai, elas encolhem e crescem conforme o pai o faz. Redimensione a janela e uma coluna 50% permanece metade da largura em vez de transbordar a borda da maneira como uma coluna fixa 500px faria. Essa flexibilidade é por que as porcentagens aparecem tão frequentemente em design responsivo.

Uma porcentagem se resolve contra uma referência no pai, e para width essa referência é a largura do conteúdo do pai. Então width: 50% lhe dá metade do que a caixa de contenção atualmente é, o que é o que torna colunas baseadas em porcentagem fluidas: elas rastreiam o pai conforme ele redimensiona.

.container {
  width: 90%;                  /* 90% de seu pai, até um limite abaixo */
  max-width: 60rem;            /* pare de crescer passado 60rem em telas largas */
  margin: 0 auto;              /* centre isso */
}

A referência nem sempre é largura, e isso engana as pessoas. Um padding ou margin em porcentagem, até os verticais, se resolve contra a largura do pai, não sua altura. Uma height em porcentagem se resolve contra a altura do pai, mas apenas se o pai tiver uma altura definida para medir, caso contrário não tem nada para se resolver e é ignorada. Emparelhar uma largura em porcentagem com um max-width em rem, como acima, é o movimento comum: fluido até um ponto, depois limitado para que as linhas não se estiquem muito para ler.

Uma porcentagem é relativa, mas diferentemente de rem e em sua referência não é um tamanho de fonte, é uma dimensão do bloco de contenção (a caixa que estabelece a referência para um elemento posicionado ou em fluxo, geralmente a caixa de conteúdo do pai). A pegadinha que morde é que a dimensão de referência é específica da propriedade, e nem sempre é aquela que você esperaria:

.hero {
  width: 80%;                  /* 80% da LARGURA do bloco de contenção */
  padding-top: 25%;            /* também 25% da LARGURA, não da altura */
  margin-bottom: 10%;          /* LARGURA novamente, mesmo que seja vertical */
}

Porcentagens de width, padding e margin todas se resolvem contra a largura do bloco de contenção, incluindo os preenchimentos e margens verticais. Esse preenchimento vertical baseado em largura não é uma particularidade para contornar; é o truque clássico para uma caixa de proporção fixa antes de aspect-ratio chegar, já que padding-top: 56.25% dá uma área 16:9 que escala com largura. Uma porcentagem de height se resolve contra a altura do bloco de contenção, mas apenas se essa altura for definitiva (explicitamente definida ou de outra forma resolúvel); contra uma altura automática ela calcula auto e parece não fazer nada, que é a usual razão pela qual uma altura percentual silenciosamente falha. Em layout moderno, flex-basis e porcentagens de trilha de grade se comportam mais previsivamente, então as porcentagens permanecem úteis para larguras fluidas enquanto fr unidades e min()/max()/clamp() cobrem os casos que as porcentagens lidam desajeitadamente.

JunoPorcentagens Uma porcentagem dimensiona contra o pai, então width: 50% é metade da largura da caixa em que o elemento fica. Isso torna colunas fluidas: redimensione a janela e elas crescem e encolhem em vez de transbordarem. É uma das principais ferramentas por trás de layouts que se adequam a qualquer tela.

JunoPorcentagens Uma largura em porcentagem é uma fração do pai, o que mantém as colunas fluidas conforme o contentor redimensiona. Observe a referência: preenchimento em porcentagem e margem se resolvem contra a largura do pai, até os verticais, e uma altura em porcentagem precisa que o pai tenha uma altura definitiva. Emparelhar uma largura em porcentagem com um max-width em rem mantém isso fluido mas limitado.

JunoPorcentagens Porcentagens se resolvem contra o bloco de contenção, e a referência é específica da propriedade: width, padding e margin todas usam sua largura, valores verticais inclusos, que é o truque por trás de caixas de proporção baseadas em largura. Uma altura em porcentagem precisa de uma altura definida do pai ou calcula auto e não faz nada. Mantenha porcentagens para larguras fluidas e deixe unidades fr e clamp() lidar com os casos desajeitados.

Unidades de visualização

Unidades de visualização dimensionam contra a janela do navegador em si. vw é uma porcentagem da largura de visualização e vh é uma porcentagem da altura de visualização, onde a visualização é a área visível da página. Então 100vw é a largura total da janela e 100vh é sua altura total.

.hero {
  height: 100vh;               /* preenche toda a altura da tela */
}

Essa é a favorita para uma seção de tela cheia, como um banner de desembarque que deve preencher a janela em qualquer tamanho que seja. Porque as unidades rastreiam a janela, a seção permanece em tela cheia quando alguém redimensiona ou rotaciona seu dispositivo, sem você definir uma altura de pixel fixo que seria apenas correta em uma tela.

Unidades de visualização medem contra a visualização, a área visível da janela do navegador. vw é um por cento da largura de visualização e vh é um por cento de sua altura, então 100vh é uma altura de janela inteira e 50vw é metade de sua largura. Elas são o ajuste natural para seções de tela cheia e banners de herói que devem preencher a janela em qualquer tamanho.

.hero {
  min-height: 100vh;           /* pelo menos uma tela inteira de altura */
  padding: 2rem;
}

Uma coisa para saber em dispositivos móveis: 100vh historicamente incluía o espaço atrás da barra de endereço do navegador, então uma seção de altura total poderia ficar mais alta que a área visível e ser cortada na parte inferior. O conserto é dvh, a altura de visualização dinâmica, que rastreia a altura realmente visível conforme a interface do navegador mostra e esconde. Busque min-height: 100dvh em seções de tela cheia móvel, e observe que vw bruto em tamanhos de fonte ignora as configurações de fonte do leitor, então mantenha unidades de visualização para layout em vez de tipo.

Unidades de visualização se resolvem contra a visualização, a área de renderização visível da janela do navegador. vw e vh são um por cento de sua largura e altura; vmin e vmax são um por cento do menor e maior dos dois, convenientes para valores que devem responder à orientação. Sua referência é a janela, não qualquer pai, então elas são a ferramenta certa para seções de visualização completa independente do layout ao seu redor.

.hero {
  min-height: 100dvh;          /* altura visível completa, segura para móvel */
  padding: 2rem;
}

A borda afiada é móvel, onde a altura de visualização não é um número. A barra de endereço do navegador e barras de ferramentas expandem e recolhem conforme o usuário rola, então 100vh foi fixado na maior visualização possível e uma seção de altura total seria estoura por trás da interface. O CSS agora expõe três: svh (altura de visualização pequena, interface expandida), lvh (grande, interface recolhida), e dvh (dinâmica, que segue o estado atual em tempo real). Use dvh para seções de tela cheia que devem caber na área visível, aceitando que ela refluxo conforme as barras se movem. A outra armadilha é font-size em vw bruto: porque uma referência de unidade de visualização é a janela e não o tamanho de fonte raiz, font-size: 4vw ignora tanto o tamanho de fonte padrão do leitor quanto o zoom de página que não muda a visualização, o que falha o mesmo teste de acessibilidade quanto um tamanho de fonte px. O conserto é limitá-lo: clamp(1rem, 4vw + 0.5rem, 2rem) mantém o comportamento fluido enquanto os termos rem restauram uma referência que as configurações do leitor podem mover.

JunoUnidades de visualizaçãovw e vh dimensionam contra a janela do navegador: 100vw é sua largura total e 100vh é sua altura total. Elas são a favorita para uma seção de tela cheia como um banner de desembarque, porque fica em tela cheia quando a janela redimensiona em vez de ser travada em uma altura de pixel.

JunoUnidades de visualizaçãovw e vh são um por cento da largura e altura da janela, o que as torna certas para seções de herói que devem preencher a tela em qualquer tamanho. Em móvel, 100vh pode correr mais alto que a área visível por trás da barra de endereço, então busque dvh ali. Mantenha unidades de visualização para layout, não tamanhos de fonte, pois vw bruto em tipo ignora as configurações do leitor.

JunoUnidades de visualização Unidades de visualização se ancoram na janela, não a um pai, então elas convêm a seções de visualização completa; vmin e vmax respondem à orientação. Em móvel a altura não é um valor, então use dvh para seguir a área visível conforme a interface do navegador se move. Nunca dimensione tipo em vw bruto, pois ignora as configurações de fonte do leitor; limite-o em um clamp() com termos rem para que uma referência acessível permaneça na expressão.