Használata
- Állítsa be a gyökér betűméretet, ha a webhelye módosítja (például a html { font-size: 62.5% } 10px-t eredményez).
- Írjon be egy értéket valamelyik mezőbe a px-ről rem-re vagy rem-ről px-re való átváltáshoz. Váltson em-re, ha szülőelemhez viszonyítva méretez.
- Használja a táblázatot a gyors kereséshez, vagy illesszen be egy CSS-részletet, hogy az összes px-értéket egyszerre átváltsa, és másolja ki az eredményt.
Hogyan működik
rem = px ÷ gyökér betűméret. Az alapértelmezett 16px gyökérméretnél 24px = 1,5rem, 14px pedig 0,875rem. Az em ugyanezt a képletet használja, de a szülőelem betűméretével, ezért a beágyazott em értékek szorzódnak; a rem ezt elkerüli, mert mindig a gyökérhez viszonyít.
Ha a betűméretekhez és térközökhöz remet használ, a szöveg együtt skálázódik azzal, ha valaki megnöveli a böngésző alapértelmezett betűméretét, ami a gyengén látóknak segít. Az értékek négy tizedesjegyre kerekítve jelennek meg.
A kódrészlet-átalakító a px egységgel megadott számokat cseréli. A megjegyzéseket, url(…) hivatkozásokat és idézőjeles szövegeket változatlanul hagyja, kérésre megtartja az 1px értéket (a vékony szegélyek általában 1px-ek maradjanak), a 0px-t 0-nak írja, és alapértelmezés szerint békén hagyja a @media és @container feltételeket, mert a médialekérdezésekben a rem és az em mindig a böngésző kezdeti betűméretére vonatkozik, függetlenül a beállított gyökérmérettől. A calc() szemantikáját nem érti azon túl, hogy a benne lévő px számokat cseréli, ami így is helyes, mert minden hosszúság külön kerül átváltásra.
Példák
Alapértelmezett gyökérméret
16px gyökérméretnél: 12px = 0,75rem, 20px = 1,25rem, 32px = 2rem, 0,5rem = 8px.
A 62,5%-os trükk
Ha a CSS-ben html { font-size: 62.5% } van megadva, a gyökérméret 10px, így 14px = 1.4rem és 24px = 2.4rem. Állítsa be a gyökér betűméret mezőt 10-re, hogy egyezzen.
Komponens átváltása
padding: 24px 16px; border: 1px solid #ddd; ebből padding: 1.5rem 1rem; border: 1px solid #ddd; lesz, ha az „1px értékek megtartása” be van kapcsolva.
Gyakori kérdések
Melyiket használjam: rem vagy em?
Használja a rem egységet a legtöbb betűmérethez, térközhöz és elrendezéshez, mert mindenhol kiszámítható. Az em egységet akkor érdemes használni, ha valaminek a saját komponense szövegmérete szerint kell skálázódnia, például egy gomb belső térközénél.
Miért nem érdemes a médialekérdezéseket remre váltani?
Megteheti, de a médialekérdezésben 1rem mindig a böngésző alapértelmezett betűméretét jelenti (általában 16px), nem a html font-size értékét. Az átváltó ezért alapértelmezés szerint kihagyja őket; kapcsolja ki a beállítást, ha ettől függetlenül 16-tal osztana.
A rem jobb az akadálymentesség szempontjából, mint a px?
Betűméreteknél igen: a rem tiszteletben tartja a felhasználó alapértelmezett betűméret-beállítását, míg a px betűméretek figyelmen kívül hagyják. A böngésző nagyítása mindkét egységgel működik.
Adatvédelem
Az átváltások és a CSS-részlet feldolgozása az Ön böngészőjében történik, és soha nem kerül elküldésre sehová.