Unidades de medidas CSS

Introdução

As unidades de medidas CSS são classificadas em dois grupos conforme mostrados a seguir:

Unidades de medidas de distância <length>

Medidas relativas

Para fontes: unidades em, ex, ch, rem

Porcentagem da viewport: unidades vw, vh, vmin, vmax

A especificação do W3C classifica tecnicamente a porcentagem (%) como tipo de dado e não unidade de medida.

Medidas absolutas

Unidades cm, mm, q, in, pt, pc, px

Unidades de medidas para outras quantidades

Outras quantidades

Ângulos: unidades: deg, grad, rad, turn

Duração: unidades s, ms

Frequência: unidades Hz, kHz

Resolução: unidades dpi, dpcm, dppx

Unidades de medidas de distância <length>

As unidades de medida de distância definem medidas na horizontal, na vertical ou em qualquer direção.

A sintaxe para se declarar o valor de uma unidade de medida de distância é composta por um número inteiro ou decimal imediatamente precedido do sinal '+' (mais) ou do sinal '-' (menos) — o sinal '+' (mais) é o padrão — imediatamente seguido por uma unidade de medida CSS válida (por exemplo: px, em, deg, s, dpi, vw, etc).

A unidade de medida é opcional quando se declara o valor '0' (zero).

Algumas das propriedades CSS permitem que sejam declarados valores negativos para unidades de medida.

Medidas de distância relativas

São medidas calculadas em relação a uma outra unidade de medida. Usar unidades de medidas relativas é mais apropriado para se obter ajustes em diferentes tipos de mídia. (por exemplo: ajustar de uma tela de monitor para uma impressora laser).

O valor é tomado em relação:

• em: ...ao tamanho da fonte ('font-size') do elemento no qual a unidade é declarada;
• ex: ...a altura da letra x (xis) da fonte herdada;
• ch: ...a largura acrescida do espaçamanto em volta do número 0 (zero) da fonte do elemento no qual a unidade é declarada;
• rem: ...ao tamanho da fonte ('font-size') do elemento raiz do documento.

O valor é igual a:

• vw: 1% da largura da viewport;
• vh: 1% da altura da viewport;
• vmin: a menor medida entre vw e vh;
• vmax: a maior medida entre vw e vh.

Medidas de distância absolutas

São medidas que não estão referenciadas a qualquer outra unidade. São as unidades de medida de comprimento definidas nos sistemas de medidas pela física, tais como, centímetro, polegada, etc... e a unidade pixel para o ângulo visual. São indicadas para serem usadas quando as mídias de exibição são perfeitamente conhecidas.

• cm - centímetro: 96px/2.54;
• mm - milímetro: 1/10cm;
• q - 1/4 do milímetro: 1/40cm;
• in - polegada: 2,54cm = 96px;
• pc - pica: 12 points ou 1/6in;
• pt - point: 1/72in;
• px - pixel: 1/96in;

Unidades de medidas para outras quantidades

Outras quantidades

Ângulos: unidades: deg, grad, rad, turn

Duração: unidades s, ms

Frequência: unidades Hz, kHz

Resolução: unidades dpi, dpcm, dppx

Unidades para ângulos

• deg - grau: um círculo tem 360deg;
• grad - grado: um círculo tem 400grad;
• rad - radiano: um círculo tem 2𝛑rad;
• turn - volta: um círculo tem 1turn;

Unidades de duração

• s - segundo: 1s;
• ms - milissegundo: 1/1000s;

Unidades para frequência

• Hz - Hertz: número de ocorrências por segundo;
• kHz - KiloHertz: 1000Hz;

Unidades para resolução

• dpi - dots per inch: pontos por polegada;
• dpcm - dots per centimeter: pontos por centímetro;
• dppx - dots per pixel: pontos por pixel;

Observe a seguir exemplos de declaração usando medidas CSS.

div { margin: 1.5em; } 
h4 { margin: 2ex; } 
p { font-size: 14px; }
.classe { padding: 90%; }
hr { width: 14pt; } 
h1 { margin: 1pc; } 
h2 { font-size: 4mm; }
p.classe { padding: 0.3cm; }
h5.classe { padding: 0.5in; }
@media ( min-resolution: 2dppx ) { ... }
background-image: linear-gradient( 45deg, white, black );
div { width: 50vw; }

Compartilhe essa matéria com seus amigos