Hver CSS-enhed: absolutte, skriftrelaterede, viewportrelaterede, de flydende funktioner samt enhederne for vinkel, tid og opløsning — hvad hver enhed måles mod, og hvornår du bør bruge den.
Absolutte enheder (px, pt) holder en fast størrelse uanset kontekst; relative enheder (rem, vw, %) skalerer mod en referenceværdi. Foretræk rem til skriftstørrelser: den respekterer brugerens indstilling af rodskriftstørrelsen, så din typografi ærer deres tilgængelighedspræference. Brug clamp() til flydende typografi, der vokser og krymper med viewporten uden nogensinde at krydse en nedre eller øvre grænse.
Referencetabel · 38 poster
CSS-enhederExplained
38 of 38 rows
Absolutte
1/96 tomme (CSS-referencepixelen).
Fast UI-dimensionering: kanter, hårlinjer, ikonmål.
border: 1px solid #000;
1/72 tomme (1pt = 1.333px).
Udskrifts-stylesheets, hvor størrelser svarer til fysisk papir.
font-size: 12pt;
1 centimeter (≈37.8px).
Udskriftslayouts med virkelige mål.
margin: 2cm;
1 millimeter (≈3.78px).
Finkornede udskriftsmål.
padding: 5mm;
1 tomme (96px = 2.54cm).
Udskriftslayouts målt i tommer.
margin: 1in;
Skriftrelaterede
Elementets egen skriftstørrelse (arvet fra dets forælder).
Afstand, der skalerer sammen med den omgivende tekst.
padding: 1em;
Rodelementets skriftstørrelse (html-elementet).
Skriftstørrelser: respekterer brugerens indstilling af rodskriftstørrelsen.
font-size: 1.25rem;
Bredden af glyffen '0' i den aktuelle skrift.
Indstil en læselig linjelængde (tegn pr. linje).
max-width: 70ch;
X-højden i den aktuelle skrift (højden af lille 'x').
Lodrette mål knyttet til skrifttypen.
line-height: 2ex;
Versalhøjden i den aktuelle skrift (højden af et stort bogstav).
Lodrette mål tilpasset versaler, smallere end ex.
padding-top: 0.5cap;
Bredden af ideogrammet '水' (vand) i den aktuelle skrift.
Dimensionering, der følger én CJK-tegncelle.
width: 4ic;
Elementets egen beregnede linjehøjde.
Giv elementer størrelse i hele tekstlinjer.
height: 3lh;
Rodelementets linjehøjde.
Afstand i multipla af dokumentets grundlinjehøjde.
margin-block: 2rlh;
Viewportrelaterede
Forælderens værdi af samme egenskab.
Flydende layouts dimensioneret efter det omgivende element.
width: 50%;
1 % af viewportens bredde.
Full-bleed-sektioner dimensioneret efter skærmbredden.
width: 100vw;
1 % af viewportens højde.
Hero-sektioner eller overlays, der spænder over skærmhøjden.
height: 100vh;
1 % af viewportens mindste dimension.
Giv elementer størrelse, så de passer på skærmen i enhver orientering.
font-size: 5vmin;
1 % af viewportens største dimension.
Udfyld viewportens dominerende akse.
font-size: 5vmax;
1 % af den lille viewportshøjde (browserens grænseflade helt synlig).
Mobile sektioner i fuld højde, der passer over browserens udfoldede grænseflade.
height: 100svh;
1 % af den store viewportshøjde (browserens grænseflade skjult).
Baggrunde, der skal dække skærmen, selv når browserens grænseflade foldes sammen.
height: 100lvh;
1 % af den dynamiske viewportshøjde, der følger browserens grænseflade, når den vises og skjules.
Mobil-løsningen på 100vh: højden ændrer sig, efterhånden som browserens grænseflade vises.
height: 100dvh;
1 % af den lille viewportsbredde.
Bredde-modstykke til svh for viewportens smalleste tilstand.
width: 100svw;
1 % af den store viewportsbredde.
Bredde-modstykke til lvh for viewportens bredeste tilstand.
width: 100lvw;
1 % af den dynamiske viewportsbredde, der følger browserens grænseflade.
Bredde-modstykke til dvh, når viewporten ændrer størrelse med grænsefladen.
width: 100dvw;
1 % af viewportens størrelse langs inline-aksen (bredde i horisontale skriveretninger).
Viewport-dimensionering, der følger skriveretningen.
width: 50vi;
1 % af viewportens størrelse langs blokaksen (højde i horisontale skriveretninger).
Viewport-dimensionering, der forbliver korrekt i lodrette skriveretninger.
height: 50vb;
Flydende
En foretrukken værdi afgrænset af et minimum og et maksimum.
Flydende typografi, der aldrig krydser en nedre eller øvre grænse.
width: clamp(320px, 80vw, 1100px);
Den mindste af sine kommaseparerede argumenter.
Begræns en størrelse, så den aldrig overstiger et maksimum.
width: min(100%, 600px);
Den største af sine kommaseparerede argumenter.
Håndhæv en minimumsstørrelse, der vokser med viewporten.
width: max(50%, 300px);
Vinkel
1/360 af en hel cirkel.
Rotationstransformationer og vinkelpositioner i gradienter.
transform: rotate(45deg);
Radianer; 1rad ≈ 57.2958deg.
Vinkler beregnet ud fra matematik, f.eks. genererede transformationer.
transform: rotate(1.5708rad);
Gradianer; 400grad = en hel cirkel.
Ældre eller landmålingslignende vinkelværdier.
transform: rotate(100grad);
1turn = en hel 360°-cirkel.
Hele og halve omdrejninger, der er hurtige at aflæse.
transform: rotate(0.5turn);
Tid
Et sekund.
Varighed af animationer og overgange.
transition: opacity 0.3s;
Et millisekund (1s = 1000ms).
Korte animationer og forsinkelser til UI-feedback.
animation-duration: 150ms;
Opløsning
Punkter pr. tomme på outputtet.
Opløsnings-media queries rettet mod udskrift.
@media (min-resolution: 300dpi)
Punkter pr. px-enhed; 1dppx svarer til en standard 96dpi-skærm.