CSS-ühikute teisendaja
Teisenda px, rem, em ja vw ühikute vahel seadistatava baasfondi suuruse ja vaatepordi laiusega. Oluline reageeriva CSS-disaini jaoks. Tasuta tööriist.
Ekvivalendid
Viide
CSS-ühikud
CSS pakub nii absoluutseid kui suhtelisi ühikuid. Absoluutsed ühikud nagu px on fikseeritud olenemata kontekstist. Suhtelised ühikud nagu rem, em ja vw skaleeruvad viite alusel — tehes neist olulised reageerivate, ligipääsetavate paigutuste jaoks.
px, rem, em, vw
px (pikslid) — absoluutne ühik. 1px on üks seadmest sõltumatu piksel. Kasuta ääristele, varjudele ja elementidele, mis ei peaks fondi suurusega skaleeruma.
rem (root em) — suhteline juur-elemendi (html) fondi suuruse suhtes. Brauseri vaikimisi juursuurus on 16px. Eelistatav fondi suuruste ja vahede jaoks, kuna see austab kasutaja brauseri fondi suuruse seadet.
em — suhteline vanema-elemendi fondi suuruse suhtes. Võib pesastatud elementides kumuleeruda. Kasulik täidiste ja marginaalide jaoks, mis peaksid skaleeruma elemendi enda fondi suurusega.
vw (vaatepordi laius) — 1vw = 1% vaatepordi laiusest. Suurepärane paindliku tüpograafia ja täislaiusega paigutuste jaoks, mis kohanduvad ekraani suurusega.
Levinud px-rem teisendused
Brauseri vaikimisi juurega 16px: 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem. Vaatepordi ühikute jaoks 1440px kujunduses: 14.4px = 1vw, 72px = 5vw.
Miks on rem eelistatud ligipääsetavuse jaoks
rem kasutamine fondi suuruste jaoks austab kasutaja brauseri fondi suuruse eelistust. Kui kasutaja seadistab oma brauseri 20px peale vaikimisi 16px asemel, skaleeruvad rem-põhised paigutused proportsionaalselt, samas kui px-põhised paigutused jäävad fikseerituks. WCAG 1.4.4 (Teksti suuruse muutmine) nõuab, et teksti saaks suurendada kuni 200% ilma sisu või funktsionaalsuse kaotuseta — rem ühikud täidavad seda nõuet loomulikult.
Privaatsus
Kogu teisendamine töötab 100% sinu brauseris. Andmeid ei saadeta serverile.