Varje CSS-enhet: absoluta, typsnittsrelativa, viewportrelativa, de flytande funktionerna samt enheterna för vinkel, tid och upplösning — vad varje enhet mäts mot och när du bör använda den.
Absoluta enheter (px, pt) håller en fast storlek oavsett kontext; relativa enheter (rem, vw, %) skalas mot ett referensvärde. Föredra rem för teckenstorlekar: den respekterar användarens inställning för rotens teckenstorlek, så din typografi respekterar deras tillgänglighetsval. Använd clamp() för flytande typografi som växer och krymper med viewporten utan att någonsin passera en undre eller övre gräns.
Referenstabell · 38 poster
CSS-enheterExplained
38 of 38 rows
Absoluta
1/96 tum (CSS-referenspixeln).
Fast UI-dimensionering: kanter, hårlinjer, ikonmått.
border: 1px solid #000;
1/72 tum (1pt = 1.333px).
Utskriftsstilmallar, där storlekar motsvarar fysiskt papper.
font-size: 12pt;
1 centimeter (≈37.8px).
Utskriftslayouter som kräver verkliga mått.
margin: 2cm;
1 millimeter (≈3.78px).
Exakta utskriftsmått.
padding: 5mm;
1 tum (96px = 2.54cm).
Utskriftslayouter med mått i tum.
margin: 1in;
Typsnittsrelativa
Elementets egen teckenstorlek (ärvd från föräldern).
Avstånd som skalas tillsammans med den omgivande texten.
padding: 1em;
Rotelementets teckenstorlek (html-elementet).
Teckenstorlekar: respekterar användarens inställning för rotens teckenstorlek.
font-size: 1.25rem;
Bredden på glyfen '0' i det aktuella typsnittet.
Ställ in en läsbar radlängd (tecken per rad).
max-width: 70ch;
X-höjden i det aktuella typsnittet (höjden på gement 'x').
Vertikala mått knutna till typsnittet.
line-height: 2ex;
Kapitälhöjden i det aktuella typsnittet (höjden på en versal).
Vertikala mått anpassade efter versaler, trängre än ex.
padding-top: 0.5cap;
Bredden på ideogrammet '水' (vatten) i det aktuella typsnittet.
Dimensionering som följer en CJK-teckencell.
width: 4ic;
Elementets egen beräknade radhöjd.
Ge element storlek i hela textrader.
height: 3lh;
Rotelementets radhöjd.
Avstånd i multipler av dokumentets basala radhöjd.
margin-block: 2rlh;
Viewportrelativa
Förälderns värde för samma egenskap.
Flytande layouter dimensionerade efter det omslutande elementet.
width: 50%;
1 % av viewportens bredd.
Fullbleed-sektioner dimensionerade efter skärmbredden.
width: 100vw;
1 % av viewportens höjd.
Hero-sektioner eller överlägg som spänner över skärmhöjden.
height: 100vh;
1 % av viewportens mindre dimension.
Ge element storlek så att de får plats på skärmen i alla orienteringar.
font-size: 5vmin;
1 % av viewportens större dimension.
Fyll viewportens dominerande axel.
font-size: 5vmax;
1 % av den lilla viewportshöjden (webbläsarens gränssnitt helt synligt).
Mobilsektioner i full höjd som får plats ovanför webbläsarens utfällda gränssnitt.
height: 100svh;
1 % av den stora viewportshöjden (webbläsarens gränssnitt dolt).
Bakgrunder som måste täcka skärmen även när webbläsarens gränssnitt fälls ihop.
height: 100lvh;
1 % av den dynamiska viewportshöjden, som följer webbläsarens gränssnitt när det visas och döljs.
Mobilfixen för 100vh: höjden ändras när webbläsarens gränssnitt visas.
height: 100dvh;
1 % av den lilla viewportsbredden.
Breddmotsvarigheten till svh för viewportens smalaste tillstånd.
width: 100svw;
1 % av den stora viewportsbredden.
Breddmotsvarigheten till lvh för viewportens bredaste tillstånd.
width: 100lvw;
1 % av den dynamiska viewportsbredden, som följer webbläsarens gränssnitt.
Breddmotsvarigheten till dvh när viewporten ändrar storlek med gränssnittet.
width: 100dvw;
1 % av viewportens storlek längs inline-axeln (bredd i horisontella skriktlägen).
Viewportdimensionering som följer skriktningen.
width: 50vi;
1 % av viewportens storlek längs blockaxeln (höjd i horisontella skriktlägen).
Viewportdimensionering som förblir korrekt i vertikala skriktlägen.
height: 50vb;
Flytande
Ett föredraget värde begränsat av ett minimum och ett maximum.
Flytande typografi som aldrig passerar en undre eller övre gräns.
width: clamp(320px, 80vw, 1100px);
Det minsta av sina kommaseparerade argument.
Begränsa en storlek så att den aldrig överskrider ett maximum.
width: min(100%, 600px);
Det största av sina kommaseparerade argument.
Framtvinga en minimistorlek som växer med viewporten.
width: max(50%, 300px);
Vinkel
1/360 av ett helt varv.
Rotationstransformeringar och vinkellägen i gradienter.
transform: rotate(45deg);
Radianer; 1rad ≈ 57.2958deg.
Vinklar beräknade ur matematik, till exempel genererade transformeringar.
transform: rotate(1.5708rad);
Gradianer; 400grad = ett helt varv.
Äldre eller geodetiska vinkelvärden.
transform: rotate(100grad);
1turn = ett helt varv på 360°.
Hela och halva varv som är lätta att läsa av.
transform: rotate(0.5turn);
Tid
En sekund.
Längd på animationer och övergångar.
transition: opacity 0.3s;
En millisekund (1s = 1000ms).
Korta animationer och fördröjningar för gränssnittsåterkoppling.
animation-duration: 150ms;
Upplösning
Punkter per tum på utdataenheten.
Upplösningsmediaregler för utskrift.
@media (min-resolution: 300dpi)
Punkter per px-enhet; 1dppx motsvarar en standarddisplay på 96dpi.