Unidades de Medida CSS
Unidades CSS
CSS tem várias unidades diferentes para expressar um comprimento.
Muitas propriedades CSS aceitam valores de “comprimento”, como width, margin, padding, font-size, etc.
Comprimento é um número seguido por uma unidade de comprimento, como 10px, 2em, etc.
Comprimentos Absolutos
As unidades de comprimento absoluto são fixas e um comprimento expresso em qualquer uma delas aparecerá exatamente com esse tamanho.
Unidades de comprimento absoluto não são recomendadas para uso na tela, porque os tamanhos das telas variam muito. No entanto, eles podem ser usados se a mídia de saída for conhecida, como para layout de impressão.
Unit
Description
cm
centimeters
mm
millimeters
in
inches (1in = 96px = 2.54cm)
px *
pixels (1px = 1/96th of 1in)
pt
points (1pt = 1/72 of 1in)
pc
picas (1pc = 12 pt)
* Pixels (px) são relativos ao dispositivo de visualização. Para dispositivos de baixo dpi, 1px é um pixel de dispositivo (ponto) da tela. Para impressoras e telas de alta resolução, 1px implica em vários pixels de dispositivo.
Comprimentos Relativos
As unidades de comprimento relativo especificam um comprimento relativo a outra propriedade de comprimento. As unidades de comprimento relativo são melhor dimensionadas entre diferentes meios de renderização.
Unit
Description
em
Relative to the font-size of the element (2em means 2 times the size of the current font)
ex
Relative to the x-height of the current font (rarely used)
ch
Relative to the width of the “0” (zero)
rem
Relative to font-size of the root element
vw
Relative to 1% of the width of the viewport*
vh
Relative to 1% of the height of the viewport*
vmin
Relative to 1% of viewport’s* smaller dimension
vmax
Relative to 1% of viewport’s* larger dimension
%
Relative to the parent element
Dica: As unidades em e rem são práticas na criação de layouts perfeitamente escaláveis!
* Viewport = o tamanho da janela do navegador. Se a janela de visualização tiver 50 cm de largura, 1vw = 0,5 cm.
1 comentário
Ryan · janeiro 13, 2025 às 3:24 pm
Greerings from Los angeles! I’m bored to death at work so I decided to check oout
your website on my iphone during lunch break. I enjoy the informaion you provide here and can’t wait
to take a look when I get home. I’m amazed att how quick your blog loased on my phone ..
I’m not even usiing WIFI, just 3G .. Anyways, grea site! http://boyarka-Inform.com/