CSS-yksikkömuunnin

Viite

CSS-yksiköt

CSS tarjoaa sekä absoluuttisia että suhteellisia yksikköjä. Absoluuttiset yksiköt kuten px ovat kiinteitä kontekstista riippumatta. Suhteelliset yksiköt kuten rem, em ja vw skaalautuvat viitteen perusteella — tehden niistä olennaisia responsiivisille, saavutettaville asetteluille.

px, rem, em, vw

px (pikselit) — absoluuttinen yksikkö. 1px on yksi laiteriippumaton pikseli. Käytä reunuksille, varjoille ja elementeille, jotka eivät saa skaalautua kirjaisinkoon mukaan.

rem (root em) — suhteessa juuri-elementin (html) kirjaisinkokoon. Selaimen oletuskoko on 16px. Suositaan kirjaisinkokoihin ja välitykseen, koska se kunnioittaa käyttäjän selaimen kirjasinkokoasetusta.

em — suhteessa vanhempi-elementin kirjaisinkokoon. Voi kasautua sisäkkäisissä elementeissä. Hyödyllinen täytteille ja marginaaleille, jotka skaalautuvat elementin oman kirjaisinkoon mukaan.

vw (näkymän leveys) — 1vw = 1% näkymän leveydestä. Erinomainen joustavaan typografiaan ja kokonäkymän levyisiin asetteluihin, jotka mukautuvat näyttökokoon.

Yleiset px-rem-muunnokset

Selaimen oletusjuurella 16px: 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem. Näkymäyksiköille 1440px:n suunnitelmassa: 14.4px = 1vw, 72px = 5vw.

Miksi rem on suositeltava saavutettavuudelle

rem-yksikön käyttö kirjaisinkokoihin kunnioittaa käyttäjän selaimen kirjasinkokoasetusta. Kun käyttäjä asettaa selaimensa 20px:iin oletuksen 16px sijaan, rem-pohjaiset asettelut skaalautuvat suhteellisesti, kun taas px-pohjaiset asettelut pysyvät kiinteinä. WCAG 1.4.4 (Tekstin koon muuttaminen) vaatii, että tekstin kokoa voidaan muuttaa jopa 200% ilman sisällön tai toiminnallisuuden menetystä — rem-yksiköt täyttävät tämän vaatimuksen luonnollisesti.

Tietosuoja

Kaikki muunnos toimii 100% selaimessasi. Tietoja ei lähetetä palvelimelle.