Unidades de medidas no CSS

265d atrás

Ion

---

0 0

As unidades de medidas são usadas no #CSS para definir o tamanho de propriedades como width, height, margin, padding, font-size etc. Cada uma tem sua particularidade.

cm

Tamanho fixo. Representa 1 centímetro.

div {
    width: 1cm;
}

mm

Tamanho fixo. Representa 1 milímetro.

p {
    font-size: 10mm;
}

in

Tamanho fixo. Representa 1 polegada. 1in = 96px = 2,54cm.

px

Tamanho fixo. 1px = 1/96 in.

p {
    font-size: 16px;
}

pt

Tamanho fixo. Representa 1 ponto. 1pt = 1/72 in.

pc

Tamanho fixo. Representa 1 pica. 1pc = 12pt.

em

Tamanho relativo. Representa o tamanho da fonte do elemento em questão.

div p {
    font-size: 2em; // Se font-size = 16px, 2em = 32px
}

ch

Tamanho relativo. Representa a largura do caractere "0".

rem

Tamanho relativo. Representa o tamanho da fonte do elemento root.

vw

Tamanho relativo. Representa 1% da largura do viewport (janela do browser).

div {
    width: 1vw; // 1%
}

section {
    width: 100vw; // 100%
}

vh

Tamanho relativo. Representa 1% da altura do viewport.

vmin

Tamanho relativo. Representa 1% da menor medida do viewport. Por exemplo, se a altura for menor que a largura do viewport, a altura é usada.

vmax

Tamanho relativo. Representa 1% da maior medida do viewport.

%

Tamanho relativo. Representa a % de altura ou largura do elemento pai.