CSS enheder

CSS enheder

CSS har flere forskellige enheder til at angive længde.

Mange CSS-ejenskaber accepterer “længde”-værdier som width、margin、padding、font-size osv.

Længde er et tal efterfulgt af en længdeenhed, såsom 10px、2em osv.

Eksempel

Brug px (pixels) til at indstille forskellige længdeværdier:

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

Prøv det selv

Der må ikke være et mellemrum mellem tal og enhed. Men hvis værdien er 0, kan enheden undlades.

For nogle CSS egenskaber kan negative længder bruges.

Der er to typer længdeenheder:Absolute enhederogRelative enheder.

Absolute længde

Absolute længdeenheder er faste, og længden, der repræsenteres ved enhver absolut længde, vises præcis som denne størrelse.

Det anbefales ikke at bruge absolute længdeenheder på skærmen, da skærmstørrelser varierer meget. Men hvis outputmediumet er kendt, kan de bruges, f.eks. til printlayout (print layout).

Enhed Beskrivelse TIY
cm Centimeter Prøv det!
mm Millimeter Prøv det!
in Tommer (1in = 96px = 2.54cm) Prøv det!
px * Pixel (1px = 1/96 af 1in) Prøv det!
pt Point (1pt = 1/72 af 1in) Prøv det!
pc Pica (1pc = 12 pt) Prøv det!

* Pixel (px) er relativt til visningsenheden. For enheder med lav dpi, er 1px en enhedspixel (punkt) på skærmen. For printere og højopløselige skærme repræsenterer 1px flere enhedspixels.

Relative længde

Relative længdeenheder definerer længden relativt til en anden længdeegenskab. Relative længdeenheder viser sig bedre ved skalerbarhed mellem forskellige rendering medier.

Enhed Beskrivelse TIY
em Relativt til elementets skriftstørrelse (font-size) (2em betyder dobbelt den nuværende skriftstørrelse) Prøv det!
ex Relativt til nuværende skrifts x-height (sædvanligvis ikke brugt) Prøv det!
ch Relativt til "0" (nul) bredde Prøv det!
rem Relativt til rodens skriftstørrelse (font-size) Prøv det!
vw Relativt til visportens bredde med 1% Prøv det!
vh Relativt til visportens højde med 1% Prøv det!
vmin Relativt til visportens mindre dimensioner med 1% Prøv det!
vmax Relativt til visportens større dimensioner med 1% Prøv det!
% Relativt til forældrelementet Prøv det!

Ved visem 和 rem enheder kan bruges til at skabe perfekte skalerbare layouter!

* 视口（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