Unidades de medidas no CSS
No CSS, as unidades de medida são usadas para especificar o tamanho e a posição dos elementos em uma página da web. Existem várias unidades de medida disponíveis no CSS, e elas podem ser agrupadas em duas categorias principais: unidades absolutas e unidades relativas. Aqui estão algumas das unidades de medida mais comuns no CSS:
Unidades Absolutas
px (pixels):
Uma unidade de medida fixa que representa um único pixel na tela. É amplamente usada para definir tamanhos precisos de elementos, como largura e altura.
#retangulo_px { width: 200px; height: 100px; }
cm (Centímetros):
A unidade cm representa centímetros. Um centímetro é uma unidade de medida de comprimento comum no sistema métrico. No CSS, quando você usa cm, está especificando tamanhos com base no comprimento real em centímetros. Por exemplo, 2cm será sempre equivalente a 2 centímetros na impressão ou na tela.
#retangulo_cm { width: 5cm; height: 2.5cm; }
mm (Milímetros):
A unidade mm representa milímetros. O milímetro é uma unidade de medida de comprimento no sistema métrico. Um milímetro é equivalente a 1/1.000 (um milésimo) de um metro. Essa unidade é usada para medir distâncias e tamanhos em escalas muito pequenas.
#retangulo_mm { width: 50mm; height: 25mm; }
pt (Pontos):
A unidade pt é frequentemente usada em design gráfico e tipografia. Um ponto é uma unidade de medida que é comumente utilizada em impressão. Em CSS, pt representa pontos, onde 1 ponto é igual a 1/72 de polegada. No entanto, o tamanho real em pixels de um ponto pode variar dependendo da resolução do dispositivo.
#texto_pt { font-size: 12pt; }
pc (Picas):
A unidade pc é usada principalmente em design gráfico e tipografia. Um pica é uma unidade de medida tipográfica que é igual a 12 pontos. Em CSS, pc representa picas, e o tamanho real em pixels pode variar dependendo da resolução do dispositivo.
#texto_pc { font-size: 6pc; }
in (Polegadas):
A unidade in representa polegadas. Uma polegada é uma unidade de medida de comprimento amplamente usada, especialmente em design de impressão. Em CSS, in especifica tamanhos em polegadas reais. Por exemplo, 1in será sempre equivalente a 1 polegada na impressão ou na tela.
#retangulo_in { width: 2in; height: 1in; }
Unidades Relativas
% (porcentagem):
Representa uma porcentagem do valor do elemento pai. Por exemplo, se você definir a largura de um elemento como 50%, ele ocupará metade da largura do seu elemento pai.
.elemento { width: 50%; }
em:
Representa o tamanho da fonte do elemento. Por exemplo, se você definir o tamanho da fonte de um elemento como 1.5em, ele será 1,5 vezes maior que o tamanho da fonte do elemento pai.
p { font-size: 1.2em; }
rem:
Semelhante ao "em", mas representa o tamanho da fonte do elemento raiz (normalmente o tamanho da fonte do ``). Isso torna as unidades "rem" úteis para criar layouts mais previsíveis.
p { font-size: 1.5rem; }
ex:
A unidade ex é relativa à altura da letra "x" (minúscula) no tipo de letra atual. Isso significa que a altura de "ex" varia dependendo do tipo de fonte e do tamanho da fonte definidos em um elemento. Em outras palavras, 1ex é igual à altura da letra "x" em relação ao tamanho da fonte atual.
p { font-size: 0.8ex; }
ch:
A unidade ch é relativa à largura do caractere "0" (zero) no tipo de letra atual. Similar à unidade ex, o valor de 1ch representa a largura de um caractere "0" em relação ao tamanho da fonte atual.
.elemento { width: 20ch; }
vw (viewport width):
Representa uma porcentagem da largura da janela de visualização do navegador. Por exemplo, 1vw é igual a 1% da largura da janela.
.elemento { width: 10vw; }
vh (viewport height):
Representa uma porcentagem da altura da janela de visualização do navegador. Similar ao "vw", mas em relação à altura da janela.
.elemento { height: 20vh; }
vmin (Viewport Mínimo):
A unidade vmin é relativa ao tamanho mínimo da janela de visualização (viewport) do navegador. Ela se ajusta ao tamanho da janela do navegador e é usada para criar layouts responsivos que levam em consideração o tamanho da tela.
p { font-size: 2vmin; }
vmax (Viewport Máximo):
A unidade vmax é relativa ao tamanho máximo da janela de visualização (viewport) do navegador. Ela se ajusta ao tamanho da janela do navegador e é usada para criar layouts responsivos que levam em consideração o tamanho da tela.
p { font-size: 3vmax; }
Antes de usar unidades vmin, vmax verifique se há suporte para o seu navegador em: https://caniuse.com/?search=vw
Essas são algumas das unidades de medida mais comuns no CSS. A escolha da unidade depende do contexto e dos requisitos do seu projeto, e você pode combiná-las para criar layouts responsivos e flexíveis em páginas da web.
