PX-REM muundur

Kuidas PX-REM muundurit kasutada

1. Sea Juurelemendi fondisuurus (px). Kõigis suuremates brauserites on see 16, kui sinu stiilileht seda ei muuda. Välja all olevad nupud lülituvad väärtustele 16 px, 10 px (nipp html { font-size: 62.5%; }) või 18 px.
2. Kui töötad em-iga, sea Vanemelemendi fondisuurus em jaoks (px): selle elemendi arvutatud fondisuurus, mis sisaldab stiliseeritavat elementi.
3. Jaotises Teisenda väärtus sisesta väärtus väljale Pikslid (px), REM või EM. Kaks ülejäänud välja uuenevad sedamööda, kuidas kirjutad, ja allolev rida näitab kasutatud jagamist.
4. Hulgiteisenduse tabel loetleb levinud suurused. Asenda Pikslite väärtused oma disainimärkidega (vahede skaala, tüpograafia skaala…) ja kasuta nuppu Kopeeri tabel, et tulemus arvutustabelisse või disainidokumenti kleepida.
5. Olemasoleva koodi üleviimiseks kleebi see väljale Teisendatav CSS, vali valikud ja klõpsa nupul Teisenda px rem-iks. Laadi näide näitab väikest stiililehte. Kopeeri Teisendatud CSS nupuga Kopeeri.

Teisendus toimub täielikult sinu brauseris. Midagi, mida kleebid, ei saadeta serverisse.

Valemid

• rem = px ÷ juurelemendi fondisuurus. Vaikimisi 16 px korral on 24px = 24 ÷ 16 = 1,5rem.
• em = px ÷ vanemelemendi fondisuurus. 20 px pealkirja sees on 10px = 0,5em.
• px = rem × juurelemendi fondisuurus ja px = em × vanemelemendi fondisuurus.

rem või em: kumba kasutada?

rem („root em“) viitab alati elemendi html fondisuurusele, seega tähendab 1.5rem kogu lehel sama asja. See on kõige turvalisem valik fondisuuruste, vahede, maksimaalsete laiuste ja paigutusvahede jaoks.

em viitab elemendi enda fondisuurusele (omaduse font-size puhul vanema omale). See kumuleerub: kolm korda pesastatud loend suurusega 0,9em jõuab väärtuseni 0,9 × 0,9 × 0,9 = 73% alusest. See teeb em-i mugavaks asjade jaoks, mis peavad skaleeruma oma tekstiga (nupu polster, silti kõrval oleva ikooni suurus), ning riskantseks globaalse tüpograafia jaoks.

Miks rem on ligipääsetavuse jaoks oluline

Paljud inimesed suurendavad brauseri seadetes vaikimisi fondisuurust (näiteks 16-lt 20 või 24 px-ni), selle asemel et iga lehte suumida. Pikslites kirjutatud suurused ignoreerivad seda eelistust; rem-ides või em-ides kirjutatud suurused järgivad seda. Rem-i kasutamine teksti ja vahede jaoks lubab kogu paigutusel kasvada koos lugeja valikuga, mis aitab täita WCAG 2.2 edukriteeriumi 1.4.4 (teksti suuruse muutmine kuni 200%).

Sama põhjusel väldi html { font-size: 16px; } seadmist pikslites: kasuta protsenti (100% või 62.5%, kui soovid 1rem = 10px), et kasutaja seade jääks kehtima.

Mida CSS-i teisendaja muudab

See asendab deklaratsioonides arvud, mille järel on px, väärtusega, mis on jagatud juurelemendi fondisuurusega. See ei puuduta kunagi kommentaare, stringe ega url() väärtusi.

• Jäta äärise ja kontuuri laiused px-iks: border, border-*-width, outline, outline-offset ja column-rule jäävad px-iks, et peened jooned püsiksid teravad. border-radius teisendatakse siiski.
• Jäta 1px väärtused: iga väärtus vahemikus −1px kuni 1px jääb muutmata.
• Teisenda meediapäringud em-iks (16px alus): tingimustes @media viitavad rem ja em alati brauseri algsele fondisuurusele, mitte sinu html reeglile, seega jagab tööriist seal 16-ga ja kirjutab em-i, olenemata sinu juurelemendi suurusest. Märkimata jättes jäävad meediapäringud px-iks.