Abszolút ⤢ px1/96 hüvelyk (a CSS referencia pixel). Rögzített UI-méretezés: szegélyek, hajszálvonalak, ikonméretek. border: 1px solid #000; ⤢ pt1/72 hüvelyk (1pt = 1.333px). Nyomtatási stíluslapok, ahol a méretek a fizikai papírhoz igazodnak. font-size: 12pt; ⤢ cm1 centiméter (≈37.8px). Valódi méreteket igénylő nyomtatási elrendezések. margin: 2cm; ⤢ mm1 milliméter (≈3.78px). Finom nyomtatási méretek. padding: 5mm; ⤢ in1 hüvelyk (96px = 2.54cm). Hüvelykben mért nyomtatási elrendezések. margin: 1in; Betűméret-relatív ⤢ emAz elem saját betűmérete (a szülőtől örökölve). Térköz, amely a környező szöveggel együtt skálázódik. padding: 1em; ⤢ remA gyökérelem betűmérete (a html elem). Betűméretek: tiszteletben tartja a felhasználó gyökér-betűméret beállítását. font-size: 1.25rem; ⤢ chA '0' glyph előrehaladási szélessége az aktuális betűtípusban. Olvasható sorkhossz beállítása (karakter soronként). max-width: 70ch; ⤢ exAz aktuális betűtípus x-magassága (a kis 'x' magassága). A betűképhez kötött függőleges metrikák. line-height: 2ex; ⤢ capAz aktuális betűtípus kapitális magassága (egy nagybetű magassága). Nagybetűkhöz mért függőleges metrikák, szűkebb, mint az ex. padding-top: 0.5cap; ⤢ icA '水' (víz) ideogramma előrehaladási szélessége az aktuális betűtípusban. Méretezés, amely egy CJK karaktersablont követ. width: 4ic; ⤢ lhAz elem saját számított sormagassága. Elemek méretezése egész szövegsorokban. height: 3lh; ⤢ rlhA gyökérelem sormagassága. Térköz a dokumentum alap sormagasságának többszöröseiben. margin-block: 2rlh; Viewport-relatív ⤢ %A szülő azonos tulajdonságának értéke. A befogadó elemhez méretezett fluid elrendezések. width: 50%; ⤢ vwA viewport szélességének 1%-a. A képernyő szélességéhez méretezett teljes szélességű szakaszok. width: 100vw; ⤢ vhA viewport magasságának 1%-a. A képernyő magasságát átfedő hero szakaszok vagy overlayek. height: 100vh; ⤢ vminA viewport kisebb dimenziójának 1%-a. Elemek méretezése, hogy minden tájolásban elférjenek a képernyőn. font-size: 5vmin; ⤢ vmaxA viewport nagyobb dimenziójának 1%-a. A viewport domináns tengelyének kitöltése. font-size: 5vmax; ⤢ svhA kis viewport magasságának 1%-a (a böngésző UI teljesen látható). Teljes magasságú mobil szakaszok, amelyek a kibontott böngésző-chrome fölött elférnek. height: 100svh; ⤢ lvhA nagy viewport magasságának 1%-a (a böngésző UI rejtett). Hátterek, amelyek akkor is lefedik a képernyőt, amikor a böngésző-chrome összecsukódik. height: 100lvh; ⤢ dvhA dinamikus viewport magasságának 1%-a, követve a böngésző UI megjelenését és elrejtését. A 100vh mobil-javítása: a magasság átméreteződik, ahogy a böngésző-chrome megjelenik. height: 100dvh; ⤢ svwA kis viewport szélességének 1%-a. Az svh szélesség-párja a legszűkebb viewport-állapothoz. width: 100svw; ⤢ lvwA nagy viewport szélességének 1%-a. Az lvh szélesség-párja a legszélesebbi viewport-állapothoz. width: 100lvw; ⤢ dvwA dinamikus viewport szélességének 1%-a, követve a böngésző UI-t. A dvh szélesség-párja, amikor a viewport a chrome-mal együtt átméreteződik. width: 100dvw; ⤢ viA viewport méretének 1%-a az inline tengely mentén (szélesség vízszintes írásirányokban). Viewport-méretezés, amely követi az írásirányt. width: 50vi; ⤢ vbA viewport méretének 1%-a a blokk tengely mentén (magasság vízszintes írásirányokban). Viewport-méretezés, amely függőleges írásirányokban is helyes marad. height: 50vb; Fluid ⤢ clamp()Egy előnyben részesített érték, minimum és maximum közé szorítva. Fluid tipográfia, amely sosem lépi át a minimális vagy maximális határt. width: clamp(320px, 80vw, 1100px); ⤢ min()A vesszővel elválasztott argumentumai közül a legkisebb. Méret korlátozása, hogy soha ne haladja meg a maximumot. width: min(100%, 600px); ⤢ max()A vesszővel elválasztott argumentumai közül a legnagyobb. Minimális méret kikényszerítése, amely a viewporttal nő. width: max(50%, 300px); Szög ⤢ deg1/360 egy teljes körből. Forgatási transzformációk és gradiens-szögpozíciók. transform: rotate(45deg); ⤢ radRadián; 1rad ≈ 57.2958deg. Matematikai számításból eredő szögek, például generált transzformációk. transform: rotate(1.5708rad); ⤢ gradGradián; 400grad = egy teljes kör. Örökölt vagy geodéziai jellegű szögértékek. transform: rotate(100grad); ⤢ turn1turn = egy teljes 360°-os kör. Teljes vagy fél fordulatok, amelyek első ránézésre érthetők. transform: rotate(0.5turn); Idő ⤢ sEgy másodperc. Animációk és átmenetek időtartama. transition: opacity 0.3s; ⤢ msEgy ezredmásodperc (1s = 1000ms). Rövid UI-visszajelzés animációk és késleltetések. animation-duration: 150ms; Felbontás ⤢ dpiHüvelykenkénti pontok a kimeneti eszközön. Nyomtatásra irányuló felbontási média lekérdezések. @media (min-resolution: 300dpi) ⤢ dppx / xPx-egységenkénti pontok; 1dppx egy szabványos 96dpi kijelzőnek felel meg. Retina és magas DPI média lekérdezések. @media (min-resolution: 2x) ⤢ dpcmCentiméterenkénti pontok (1dppx ≈ 2.54dpcm). Felbontási média lekérdezések metrikus egységekben. @media (min-resolution: 118dpcm)