| Unidade | Compare todas as unidades CSS, incluindo px, em, rem, vw, vh, fr e mais. Inclui exemplos, suporte de navegadores e quando usar cada unidade. | |
|---|---|---|
pxAbsolute | Pixels — 1/96th of 1 inch on screen | |
ptAbsolute | Points — 1/72nd of 1 inch (print) | |
pcAbsolute | Picas — 12 points = 1 pica | |
cmAbsolute | Centimeters | |
mmAbsolute | Millimeters | |
inAbsolute | Inches (1in = 96px) | |
QAbsolute | Quarter-millimeters (1Q = 0.25mm) |
| Unidade | Compare todas as unidades CSS, incluindo px, em, rem, vw, vh, fr e mais. Inclui exemplos, suporte de navegadores e quando usar cada unidade. | |
|---|---|---|
emRelative (font) | Relative to parent element's font-size | |
remRelative (font) | Relative to root (:root) font-size | |
chRelative (font) | Width of the '0' character in current font | |
exRelative (font) | Height of lowercase 'x' in current font | |
capRelative (font) | Cap height of current font | |
icRelative (font) | Advance measure of '水' (CJK ideograph) | |
lhRelative (font) | Line height of the element | |
%Relative (parent) | Percentage of parent element's value |
| Unidade | Compare todas as unidades CSS, incluindo px, em, rem, vw, vh, fr e mais. Inclui exemplos, suporte de navegadores e quando usar cada unidade. | |
|---|---|---|
vwViewport | 1% of viewport width | |
vhViewport | 1% of viewport height | |
vminViewport | 1% of the smaller viewport dimension | |
vmaxViewport | 1% of the larger viewport dimension | |
svhViewport (dynamic) | Small viewport height (excludes mobile browser chrome) | |
dvhViewport (dynamic) | Dynamic viewport height (updates with browser chrome) | |
lvhViewport (dynamic) | Large viewport height (browser chrome hidden) | |
svw / dvw / lvwViewport (dynamic) | Small/Dynamic/Large viewport width variants |
| Unidade | Compare todas as unidades CSS, incluindo px, em, rem, vw, vh, fr e mais. Inclui exemplos, suporte de navegadores e quando usar cada unidade. | |
|---|---|---|
cqwContainer | 1% of query container's inline size (width) | |
cqhContainer | 1% of query container's block size (height) | |
cqiContainer | 1% of container's inline size | |
cqbContainer | 1% of container's block size | |
cqminContainer | 1% of smaller container dimension | |
cqmaxContainer | 1% of larger container dimension |
| Unidade | Compare todas as unidades CSS, incluindo px, em, rem, vw, vh, fr e mais. Inclui exemplos, suporte de navegadores e quando usar cada unidade. | |
|---|---|---|
frGrid | Fraction of available grid track space | |
min-contentGrid keyword | Smallest content fits without overflow | |
max-contentGrid keyword | Content's ideal unconstrained width | |
fit-content(N)Grid function | Clamps max-content to N maximum | |
minmax(N, M)Grid function | Track size between minimum N and maximum M |
Escala com o tamanho de fonte :root, respeita as configurações do navegador do usuário, consistente entre componentes
Evite px — não respeita as preferências de fonte do usuário
rem para espaçamento global consistente; em para espaçamento relativo ao tamanho de fonte do componente
Evite px para componentes que escalam
% para contêineres fluidos; ch (45–75ch) para comprimento de linha de prosa ideal
Evite px fixo para largura do conteúdo principal
dvh evita sobreposição do chrome do navegador mobile; vh está bem apenas para desktop
Evite 100vh sozinho em mobile — barra de URL corta o conteúdo
Distribui o espaço restante proporcionalmente; mais limpo que % em grid
Evite combinar fr com colunas px fixas ingenuamente
Renderização precisa em pixels; não precisa escalar com o texto
Não há necessidade de unidades relativas aqui
Use rem para tamanhos de fonte. rem é relativo ao tamanho de fonte do elemento raiz (normalmente 16px), facilitando o dimensionamento de toda a interface ao alterar o tamanho de fonte raiz. Isso também respeita as preferências de tamanho de fonte do navegador do usuário, melhorando a acessibilidade. Use px apenas para bordas, sombras e elementos que não devem escalar.
em é relativo ao tamanho de fonte do elemento pai, que pode se acumular em elementos aninhados. rem é relativo ao tamanho de fonte do elemento raiz ('<'html>), tornando-o mais previsível. Para tamanhos de fonte, rem é geralmente preferido. em é útil para padding e margens que devem escalar com o tamanho de fonte do próprio componente.
Use vw/vh para elementos que devem ser dimensionados em relação ao viewport do navegador (por exemplo, seções hero de tela cheia, modais). Use porcentagens para elementos que devem ser dimensionados em relação ao seu contêiner pai. dvh (dynamic viewport height) é preferido em relação ao vh em mobile onde a barra de endereços afeta a altura.
Unidades de container query (cqw, cqh, cqi, cqb) são relativas ao tamanho de um elemento contêiner em vez do viewport. Requerem um contexto de contêiner (container-type: inline-size). São ideais para componentes verdadeiramente responsivos que precisam se adaptar ao tamanho do contêiner independentemente do tamanho do viewport.