px í rem umbreytir

Hvernig á að nota px í rem umbreytinn

1. Stilltu Rót-leturstærð (px). Hún er 16 í öllum helstu vöfrum nema stílblaðið þitt breyti henni. Hnapparnir undir reitnum skipta yfir í 16 px, 10 px (bragðið html { font-size: 62.5%; }) eða 18 px.
2. Ef þú vinnur með em skaltu stilla Leturstærð foreldris fyrir em (px): reiknaða leturstærð þáttarins sem inniheldur þáttinn sem þú ert að stílfæra.
3. Undir Umbreyta gildi sláðu inn í Pixlar (px), REM eða EM. Hinir tveir reitirnir uppfærast um leið og þú skrifar og línan fyrir neðan sýnir deilinguna sem er notuð.
4. Umbreytingartafla fyrir mörg gildi telur upp algengar stærðir. Skiptu Pixlagildi út fyrir þín eigin hönnunargildi (bilakvarða, leturkvarða …) og notaðu Afrita töflu til að líma niðurstöðuna í töflureikni eða hönnunarskjal.
5. Til að flytja eldri kóða skaltu líma hann í CSS til að umbreyta, velja valkostina og smella á Umbreyta px í rem. Hlaða dæmi sýnir lítið stílblað. Afritaðu Umbreytt CSS með Afrita.

Formúlurnar

• rem = px ÷ rót-leturstærð. Með sjálfgefnum 16 px er 24px = 24 ÷ 16 = 1,5rem.
• em = px ÷ leturstærð foreldris. Inni í 20 px fyrirsögn er 10px = 0,5em.
• px = rem × rót-leturstærð, og px = em × leturstærð foreldris.

rem eða em: hvort á ég að nota?

rem („root em“) vísar alltaf til leturstærðar html þáttarins, svo 1.5rem þýðir það sama alls staðar á síðunni. Það er öruggasta valið fyrir leturstærðir, bil, hámarksbreiddir og bil í uppsetningu.

em vísar til leturstærðar þáttarins sjálfs (fyrir font-size er það foreldrið). Það margfaldast: listi í 0,9em sem er hreiðraður þrisvar endar í 0,9 × 0,9 × 0,9 = 73% af grunninum. Það gerir em handhægt fyrir hluti sem eiga að skalast með eigin texta (fylling hnapps, stærð tákns við hlið texta) og áhættusamt fyrir almennt letur.

Hvers vegna rem skiptir máli fyrir aðgengi

Margir hækka sjálfgefna leturstærð í stillingum vafrans (til dæmis úr 16 í 20 eða 24 px) í stað þess að súmma á hverja síðu. Stærðir skrifaðar í px hunsa þá stillingu; stærðir í rem eða em fylgja henni. Með því að nota rem fyrir texta og bil vex öll uppsetningin með vali lesandans, sem hjálpar við WCAG 2.2 árangursviðmið 1.4.4 (breyta stærð texta upp í 200%).

Af sömu ástæðu skaltu forðast að setja html { font-size: 16px; } í px: notaðu prósentu (100%, eða 62.5% ef þú vilt að 1rem = 10px) svo stilling notandans gildi áfram.

Hvað CSS-umbreytirinn breytir

Hann skiptir út tölum sem fylgt er af px í yfirlýsingum fyrir gildið deilt með rót-leturstærðinni. Hann snertir aldrei athugasemdir, strengi eða url() gildi.

• Halda breidd ramma og útlína í px: border, border-*-width, outline, outline-offset og column-rule haldast í px, svo þunnar línur haldast skarpar. border-radius er samt umbreytt.
• Halda 1px gildum: öll gildi milli −1px og 1px haldast óbreytt.
• Umbreyta media query í em (16px grunnur): í @media skilyrðum vísa rem og em alltaf til upphafs-leturstærðar vafrans, aldrei til html reglunnar þinnar, svo tólið deilir með 16 og skrifar em þar, hver sem rótarstærðin þín er. Þegar hakið er tekið úr halda media query px.