Explore todas as unidades CSS — absolutas (px, cm, pt), relativas ao tipo de letra (em, rem, ch), de viewport (vw, dvh), de container-query, de grelha (fr), de ângulo, de tempo e de resolução — numa referência pesquisável e filtrável por tipo, com uma descrição, uma nota de "quando usar" e tokens prontos a copiar. No seu browser, gratuitamente.

Todas as unidades CSS, explicadas. Tudo corre no seu browser a partir de uma referência integrada — nada é enviado para o servidor.

Nenhuma unidade corresponde à sua pesquisa.
Experimente uma unidade ou categoria diferente — por exemplo rem, dvh, fr ou ângulo.

Sobre Referência de Unidades CSS

A Referência de Unidades CSS documenta toda unidade que a linguagem oferece — 45 ao todo — organizadas por tipo: unidades absolutas como px, cm e pt; unidades relativas à fonte como em, rem, ch e lh; unidades de viewport, de vw e vh até as mais recentes svh, lvh e dvh; unidades de container query como cqw e cqi; a unidade fr do grid; além de ângulo, tempo, resolução e porcentagem.

Cada cartão traz mais do que uma definição: o token da unidade em fonte monoespaçada copiável, seu nome completo, sua categoria, uma descrição em linguagem simples de como ela é calculada e uma nota prática de "quando usar" que indica onde a unidade se destaca — e onde outra serve melhor.

A pesquisa corresponde a tokens, nomes e significados, então rem, viewport width e root encontram todas as suas unidades, e chips de tipo filtram a grade até uma família. Tudo roda no seu navegador a partir de uma referência embutida, sem nada sendo enviado a um servidor.

Como usar Referência de Unidades CSS

  1. Pesquise uma unidade por token, nome ou significado — por exemplo rem, viewport width ou angle.
  2. Use os chips de tipo para filtrar a grade em unidades absolutas, relativas à fonte, de viewport, de container, de grid, de ângulo, de tempo, de resolução ou de porcentagem.
  3. Leia a descrição de cada unidade e sua nota de "quando usar" para escolher a certa.
  4. Clique no botão de copiar para obter o token da unidade para sua folha de estilo.

Perguntas frequentes

Use rem para tamanhos de fonte e qualquer coisa que deva escalar com o tamanho de texto preferido do usuário — rem acompanha o tamanho da fonte raiz, então as configurações de acessibilidade do navegador funcionam. Use px para coisas que devem permanecer opticamente constantes, como bordas finas.

em é relativo ao próprio tamanho de fonte do elemento atual, então elementos aninhados acumulam o valor; rem é sempre relativo ao elemento raiz, dando resultados previsíveis. É por isso que rem se tornou a escolha padrão para espaçamento e escalas de tipo.

Navegadores móveis mostram e escondem suas barras de ferramentas, mudando a altura visível, enquanto vh permanece fixo no tamanho de layout maior. A unidade dinâmica dvh acompanha a altura visível real conforme as barras se movem, e svh/lvh se fixam nos estados menor e maior.

fr distribui o espaço livre de um container de grid por fração: grid-template-columns: 2fr 1fr dá à primeira coluna o dobro da largura restante da segunda, depois que trilhas fixas e espaçamentos são subtraídos. Ela só existe dentro de definições de trilhas do grid.

Elas dimensionam elementos em relação ao container de consulta mais próximo, em vez do viewport: cqw é 1% da largura do container, cqi é 1% de seu tamanho em linha. Elas permitem que um componente se ajuste à caixa em que vive, independentemente do tamanho da tela.

Sim. Todas as 45 unidades são documentadas gratuitamente em uma página que roda inteiramente no seu navegador — sem cadastro, sem requisições ao servidor.

Precisa de ajuda?
Encontrou um problema com esta ferramenta? Avise a nossa equipa.
Relatar um problema

Adicione esta ferramenta gratuita ao seu próprio site — copie e cole o código abaixo.