PX–REM átváltó

A PX–REM átváltó használata

1. Állítsd be a Gyökér betűméret (px) értékét. Minden nagy böngészőben 16, hacsak a stíluslapod meg nem változtatja. A mező alatti gombok 16 px-re, 10 px-re (a html { font-size: 62.5%; } trükk) vagy 18 px-re váltanak.
2. Ha em-mel dolgozol, állítsd be a Szülő betűmérete az em-hez (px) értéket: annak az elemnek a számított betűmérete, amely a formázott elemet tartalmazza.
3. Az Érték átváltása alatt írj be értéket a Pixel (px), REM vagy EM mezőbe. A másik két mező gépelés közben frissül, az alatta lévő sor pedig megmutatja a használt osztást.
4. A Tömeges átváltási táblázat gyakori méreteket sorol fel. Cseréld le a Pixelértékeket a saját dizájntokenjeidre (térközskála, betűméretskála…), és a Táblázat másolása gombbal illeszd az eredményt egy táblázatkezelőbe vagy egy tervdokumentumba.
5. Meglévő kód átalakításához illeszd be a Átalakítandó CSS mezőbe, válaszd ki a beállításokat, és kattints a Px átalakítása rem-re gombra. A Példa betöltése egy kis stíluslapot mutat. Az Átalakított CSS-t a Másolás gombbal másolhatod ki.

A képletek

• rem = px ÷ gyökér betűméret. Az alapértelmezett 16 px-szel 24px = 24 ÷ 16 = 1,5rem.
• em = px ÷ szülő betűmérete. Egy 20 px-es címsoron belül 10px = 0,5em.
• px = rem × gyökér betűméret, és px = em × szülő betűmérete.

rem vagy em: melyiket használjam?

A rem („root em”) mindig a html elem betűméretére vonatkozik, így az 1.5rem az oldalon mindenhol ugyanazt jelenti. Ez a legbiztonságosabb választás betűmérethez, térközhöz, maximális szélességhez és elrendezési hézagokhoz.

Az em az elem saját betűméretére vonatkozik (a font-size esetén a szülőére). Halmozódik: egy háromszor egymásba ágyazott, 0,9em-es lista végül 0,9 × 0,9 × 0,9 = az alap 73%-án végzi. Emiatt az em praktikus olyan dolgokhoz, amelyeknek a saját szövegükkel együtt kell skálázódniuk (egy gomb belső margója, egy felirat melletti ikon mérete), globális tipográfiához viszont kockázatos.

Miért fontos a rem a hozzáférhetőség szempontjából?

Sokan megemelik az alapértelmezett betűméretet a böngészőbeállításokban (például 16-ról 20 vagy 24 px-re) ahelyett, hogy minden oldalt nagyítanának. A px-ben megadott méretek figyelmen kívül hagyják ezt a beállítást; a rem vagy em méretek követik. A rem használata a szövegnél és a térközöknél lehetővé teszi, hogy az egész elrendezés együtt nőjön az olvasó választásával, ami segít a WCAG 2.2 1.4.4 sikerkritériumának (szöveg átméretezése 200%-ig) teljesítésében.

Ugyanezért kerüld a html { font-size: 16px; } megadását px-ben: használj százalékot (100%, vagy 62.5%, ha azt szeretnéd, hogy 1rem = 10px legyen), hogy a felhasználó beállítása továbbra is érvényesüljön.

Mit módosít a CSS-átalakító?

A deklarációkban a px-szel végződő számokat a gyökér betűmérettel osztott értékre cseréli. Soha nem nyúl megjegyzésekhez, szövegekhez vagy url() értékekhez.

• A szegély- és körvonalvastagság maradjon px-ben: a border, a border-*-width, az outline, az outline-offset és a column-rule px-ben marad, így a vékony vonalak élesek maradnak. A border-radius továbbra is átalakul.
• Az 1 px-es értékek maradjanak: a −1px és 1px közötti értékek változatlanok maradnak.
• A media query-k átalakítása em-re (16 px alap): az @media feltételekben a rem és az em mindig a böngésző kezdeti betűméretére vonatkozik, soha nem a html szabályodra, ezért az eszköz 16-tal oszt, és ott em-et ír, a gyökérméretedtől függetlenül. Ha nincs bejelölve, a media query-k px-ben maradnak.