Jednostki CSS

Jednostki CSS

CSS ma kilka różnych jednostek do reprezentowania długości.

Wiele właściwości CSS akceptuje wartości „długości”, takie jak width,margin,padding,font-size i.

Długość to liczba połączona z jednostką długości, taką jak 10px,2em i.

Przykład

Użyj px (pixeli) do ustawienia różnych wartości długości:

h1 {
  font-size: 60px;
}
p {
  font-size: 25px;
  line-height: 50px;
}

Spróbuj sam!

Nie można występować pustych przestrzeni między liczbą a jednostką. Ale, jeśli wartość wynosi 0, można pominąć jednostkę.

Dla niektórych atrybutów CSS, dozwolone jest używanie ujemnych długości.

Jednostki długości mają dwa typy:Jednostki absolutneiJednostki względne.

Absolutne długości

Absolutne jednostki długości są stałe, długość wyrażona przez każdą absolutną jednostkę będzie dokładnie wyświetlona jako ten rozmiar.

Nie zaleca się używania absolutnych jednostek długości na ekranie, ponieważ rozmiar ekranu zmienia się znacznie. Ale, jeśli jest znany medium wyjściowe, można je użyć, na przykład do układu drukarskiego (print layout).

Jednostka Opis TIY
cm Centymetr Spróbuj!
mm Milimetr Spróbuj!
in Cale (1in = 96px = 2.54cm) Spróbuj!
px * Pixel (1px = 1/96th of 1in) Spróbuj!
pt Point (1pt = 1/72 of 1in) Spróbuj!
pc Pica (1pc = 12 pt) Spróbuj!

* Pixel (px) jest względem urządzenia do wyświetlania. Dla urządzeń o niskiej dpi, 1px to jeden urządzeń pixel (punkt). Dla drukarki i ekranów o wysokiej rozdzielczości, 1px oznacza kilka urządzeń pixeli.

Relatywne długości

Relatywne jednostki długości określają długość w stosunku do innej właściwości długości. Relatywne jednostki długości lepiej skalują się między różnymi mediami renderowania.

Jednostka Opis TIY
em W stosunku do rozmiaru czcionki (font-size) elementu (2em oznacza dwukrotność aktualnego rozmiaru czcionki) Spróbuj!
ex W stosunku do x-height aktualnej czcionki (rzadko używane) Spróbuj!
ch W stosunku do szerokości "0" (zero) Spróbuj!
rem W stosunku do rozmiaru czcionki (font-size) elementu korzenia Spróbuj!
vw W stosunku do szerokości viewportu o 1% Spróbuj!
vh W stosunku do wysokości viewportu o 1% Spróbuj!
vmin W stosunku do mniejszego rozmiaru viewportu o 1% Spróbuj!
vmax W stosunku do większego rozmiaru viewportu o 1% Spróbuj!
% W stosunku do elementu nadrzędnego Spróbuj!

Wskazówka：em i rem jednostki mogą być używane do tworzenia idealnych rozszerzalnych układów!

* 视口（Viewport）= 浏览器窗口的尺寸。如果视口宽 50 里面，则 1vw = 0.5cm。

浏览器支持

表格中的数字注明了完全支持该长度单位的首个浏览器版本。

长度单位
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 12.0 19.0 6.0 20.0
vmax 26.0 16.0 19.0 7.0 20.0