Alle CSS-enhetene: absolutte, skriftrelative, viewportrelative, de flytende funksjonene og enhetene for vinkel, tid og oppløsning – hva hver enkelt måles mot, og når du bør gripe til den.
Absolutte enheter (px, pt) beholder en fast størrelse uavhengig av kontekst; relative enheter (rem, vw, %) skalerer mot en referanseverdi. Foretrekk rem til skriftstørrelser: den respekterer brukerens innstilling for rotens skriftstørrelse, slik at typografien din ærer tilgjengelighetsvalget. Bruk clamp() til flytende typografi som vokser og krymper med viewporten uten noen gang å krysse en nedre eller øvre grense.
Referansetabell · 38 oppføringer
CSS-enheterExplained
38 of 38 rows
Absolutte
1/96 tomme (CSS-referansepikselen).
Fast UI-dimensjonering: kanter, hårfine linjer, ikonmål.
border: 1px solid #000;
1/72 tomme (1pt = 1.333px).
Utskriftsstilark, der størrelsene tilordnes fysisk papir.
font-size: 12pt;
1 centimeter (≈37.8px).
Utskriftslayout som trenger målinger fra virkeligheten.
margin: 2cm;
1 millimeter (≈3.78px).
Finmaskede utskriftsmålinger.
padding: 5mm;
1 tomme (96px = 2.54cm).
Utskriftslayout med mål i tommer.
margin: 1in;
Skriftrelative
Elementets egen skriftstørrelse (arvet fra forelderen).
Avstand som skalerer sammen med teksten rundt.
padding: 1em;
Rotelementets skriftstørrelse (html-elementet).
Skriftstørrelser: respekterer brukerens innstilling for rotens skriftstørrelse.
font-size: 1.25rem;
Bredden til '0'-glyffen i den gjeldende skriften.
Sett en lesbar linjelengde (tegn per linje).
max-width: 70ch;
X-høyden til den gjeldende skriften (høyden på liten 'x').
Vertikale måltall knyttet til skrifttypen.
line-height: 2ex;
Cap-høyden til den gjeldende skriften (høyden på en stor bokstav).
Vertikale måltall tilpasset versaler, trangere enn ex.
padding-top: 0.5cap;
Bredden til ideogrammet '水' (vann) i den gjeldende skriften.
Størrelser som følger én CJK-tegncelle.
width: 4ic;
Elementets egen beregnede linjehøyde.
Gi elementer størrelse i hele tekstlinjer.
height: 3lh;
Rotelementets linjehøyde.
Avstand i multipler av dokumentets grunnlinjehøyde.
margin-block: 2rlh;
Viewportrelative
Forelderens verdi for samme egenskap.
Flytende layout dimensjonert etter containerelementet.
width: 50%;
1 % av viewportens bredde.
Fullflatede seksjoner dimensjonert etter skjermbredden.
width: 100vw;
1 % av viewportens høyde.
Hero-seksjoner eller overdeldinger som spenner over skjermhøyden.
height: 100vh;
1 % av den minste viewport-dimensjonen.
Gi elementer størrelse så de passer på skjermen i alle orienteringer.
font-size: 5vmin;
1 % av den største viewport-dimensjonen.
Fyll viewportens dominerende akse.
font-size: 5vmax;
1 % av den lille viewport-høyden (nettleser-ui fullt synlig).
Mobilseksjoner i full høyde som passer over utfoldet nettleser-ui.
height: 100svh;
1 % av den store viewport-høyden (nettleser-ui skjult).
Bakgrunner som må dekke skjermen selv når nettleser-ui-et foldes sammen.
height: 100lvh;
1 % av den dynamiske viewport-høyden, som følger nettleser-ui-et når det vises og skjules.
Mobilfiksen for 100vh: høyden endrer seg etter hvert som nettleser-ui-et dukker opp.
height: 100dvh;
1 % av den lille viewport-bredden.
Breddemotstykket til svh for viewportens smaleste tilstand.
width: 100svw;
1 % av den store viewport-bredden.
Breddemotstykket til lvh for viewportens bredeste tilstand.
width: 100lvw;
1 % av den dynamiske viewport-bredden, som følger nettleser-ui-et.
Breddemotstykket til dvh når viewporten endrer størrelse med ui-et.
width: 100dvw;
1 % av viewportstørrelsen langs inline-aksen (bredde i horisontale skriveretninger).
Viewportdimensjonering som følger skriveretningen.
width: 50vi;
1 % av viewportstørrelsen langs blokk-aksen (høyde i horisontale skriveretninger).
Viewportdimensjonering som holder seg riktig i vertikale skriveretninger.
height: 50vb;
Flytende
En foretrukket verdi avgrenset av et minimum og et maksimum.
Flytende typografi som aldri krysser en nedre eller øvre grense.
width: clamp(320px, 80vw, 1100px);
Den minste av argumentene, atskilt med komma.
Begrens en størrelse slik at den aldri overstiger et maksimum.
width: min(100%, 600px);
Den største av argumentene, atskilt med komma.
Håndhev en minstestørrelse som vokser med viewporten.
width: max(50%, 300px);
Vinkel
1/360 av en full sirkel.
Rotasjonstransformasjoner og vinkelposisjoner i gradienter.
transform: rotate(45deg);
Radianer; 1rad ≈ 57.2958deg.
Vinkler beregnet ut fra matematikk, for eksempel genererte transformasjoner.
transform: rotate(1.5708rad);
Gradianer; 400grad = en full sirkel.
Eldre vinkelverdier eller verdier i landmålerstil.
transform: rotate(100grad);
1turn = én full sirkel på 360°.
Hele eller halve omdreininger som er lette å lese.
transform: rotate(0.5turn);
Tid
Ett sekund.
Varighet for animasjoner og overganger.
transition: opacity 0.3s;
Ett millisekund (1s = 1000ms).
Korte animasjoner og forsinkelser for ui-tilbakemelding.
animation-duration: 150ms;
Oppløsning
Punkter per tomme på utdataenheten.
Oppløsningsmediespørringer rettet mot utskrift.
@media (min-resolution: 300dpi)
Punkter per px-enhet; 1dppx tilsvarer en standard 96dpi-skjerm.