PX–REM-muunnin

Näin käytät PX–REM-muunninta

1. Aseta Juurifonttikoko (px). Se on 16 kaikissa suurimmissa selaimissa, ellei tyylitiedostosi muuta sitä. Kentän alla olevat painikkeet vaihtavat arvoon 16 px, 10 px (html { font-size: 62.5%; }-temppu) tai 18 px.
2. Jos työskentelet em-yksiköiden kanssa, aseta Vanhemman fonttikoko em-yksikölle (px): muotoilemasi elementin sisältävän elementin laskettu fonttikoko.
3. Kohdassa Muunna arvo kirjoita kenttään Pikselit (px), REM tai EM. Kaksi muuta kenttää päivittyvät kirjoittaessasi, ja alla oleva rivi näyttää käytetyn jakolaskun.
4. Massamuunnostaulukko luettelee yleisiä kokoja. Korvaa Pikseliarvot omilla suunnittelutunnisteillasi (välitysasteikko, kirjasinasteikko…) ja käytä Kopioi taulukko liittääksesi tuloksen taulukkolaskentaan tai suunnitteludokumenttiin.
5. Olemassa olevan koodin siirtämiseksi liitä se kenttään Muunnettava CSS, valitse asetukset ja napsauta Muunna px rem-yksiköiksi. Lataa esimerkki näyttää pienen tyylitiedoston. Kopioi Muunnettu CSS Kopioi-painikkeella.

Muunnos tapahtuu kokonaan selaimessasi. Liittämääsi CSS:ää ei lähetetä palvelimelle.

Kaavat

• rem = px ÷ juurifonttikoko. Oletuksella 16 px arvo 24px = 24 ÷ 16 = 1,5 rem.
• em = px ÷ vanhemman fonttikoko. 20 pikselin otsikon sisällä 10px = 0,5 em.
• px = rem × juurifonttikoko ja px = em × vanhemman fonttikoko.

rem vai em: kumpaa käyttää?

rem (”root em”) viittaa aina html-elementin fonttikokoon, joten 1.5rem tarkoittaa samaa kaikkialla sivulla. Se on turvallisin valinta fonttikokoihin, väleihin, maksimileveyksiin ja asettelun väleihin.

em viittaa elementin omaan fonttikokoon (font-size-ominaisuudessa vanhemman). Se kertautuu: kolmesti sisäkkäinen lista, jolla on 0,9 em, päätyy arvoon 0,9 × 0,9 × 0,9 = 73 % peruskoosta. Siksi em on kätevä asioihin, joiden pitäisi skaalautua oman tekstinsä mukana (painikkeen täyte, tekstin vieressä olevan kuvakkeen koko) ja riskialtis yleiseen typografiaan.

Miksi rem on tärkeä saavutettavuudelle

Moni nostaa selaimen asetuksissa oletusfonttikokoa (esimerkiksi 16:sta 20 tai 24 px:ään) zoomaamisen sijaan jokaisella sivulla. Pikseleinä kirjoitetut koot ohittavat tämän asetuksen. Rem- tai em-yksiköissä olevat koot noudattavat sitä. Kun teksteissä ja väleissä käytetään remiä, koko asettelu kasvaa lukijan valinnan mukana, mikä auttaa WCAG 2.2:n onnistumiskriteerissä 1.4.4 (tekstin koon muuttaminen 200 %:iin asti).

Samasta syystä vältä asettamasta html { font-size: 16px; } pikseleinä: käytä prosenttia (100% tai 62.5%, jos haluat 1 rem = 10 px), jotta käyttäjän asetus säilyy voimassa.

Mitä CSS-muunnin muuttaa

Se korvaa deklaraatioissa px-yksikköä seuraavat luvut arvolla, joka on jaettu juurifonttikoolla. Se ei koskaan koske kommentteihin, merkkijonoihin tai url()-arvoihin.

• Säilytä reunaviivojen ja ääriviivojen leveydet px-yksikköinä: border, border-*-width, outline, outline-offset ja column-rule pysyvät px-yksikköinä, jotta ohuet viivat pysyvät teräväpiirtoisina. border-radius muunnetaan edelleen.
• Säilytä 1 px:n arvot: mikä tahansa arvo välillä −1px–1px pysyy sellaisenaan.
• Muunna mediakyselyt em-yksiköiksi (16 px:n kanta): @media-ehdoissa rem ja em viittaavat aina selaimen alkuperäiseen fonttikokoon, eivät koskaan html-sääntöösi, joten työkalu jakaa 16:lla ja kirjoittaa siihen em-yksikön juurikoostasi riippumatta. Kun valinta on poistettu, mediakyselyt säilyttävät px-yksikkönsä.