Mire jó ez az eszköz
A px – rem és em konvertáló pixel (px) értékeket vált át gyökér em (rem) és em egységekre, illetve fordítva. A három mező – px, rem és em – bármelyikébe beírhat egy értéket, az eszköz pedig automatikusan kiszámítja és megjeleníti a másik kettőnek megfelelő értéket. Emellett beállíthatja a gyökér betűméretet és az em környezeti betűméretet is, hogy az átváltás pontosan illeszkedjen az adott tervezési feladathoz.
Amikor a px, a rem vagy az em mezők bármelyikét szerkeszti, a másik kettő gépelés közben azonnal frissül – nem kell külön gombot megnyomnia az újraszámoláshoz.
A Gyökér betűméret és az em környezeti betűméret
Az átváltás alapját két külön mező adja: a Gyökér betűméret (px) és az em környezeti betűméret (px). A Gyökér betűméret (px) mező alapértelmezett értéke 16px, és ez alapján számítja ki az eszköz a rem értékeket. Az em környezeti betűméret (px) mező szintén alapértelmezetten 16px, és annak az elemnek a betűméretét adja meg, amelyre az em átváltás vonatkozik.
Kezdetben, mielőtt bármit is módosítana, 16px egyenlő 1rem-mel és 1em-mel. Mindkét betűméretnek 0-nál nagyobb számnak kell lennie. A felület a beállított Gyökér betűméret (px) és em környezeti betűméret (px) értékeket is megjeleníti, így bármikor látja, milyen alapértékekkel számol éppen az eszköz, és bármikor módosíthatja őket a saját projektjének megfelelően. Ha egy konkrét HTML-elem betűmérete eltér az oldal gyökér betűméretétől, az em környezeti betűméret mezőbe ennek az elemnek a saját, pixelben megadott betűméretét írja be, hogy az em átváltás pontosan erre az elemre vonatkozzon.
Az Értékek mező és az élő átváltás
Az Értékek mezőbe azt a hosszúságot írja be, amelyet px, rem vagy em egységben szeretne átváltani. A beírt érték mindhárom mértékegységre lefordítódik, az eredmény pedig gépelés közben, élőben frissül. A mező negatív px értékeket is elfogad, tehát negatív előjelű hosszértékekkel is dolgozhat vele.
Mivel 16px-es gyökér betűméret mellett 16px pontosan 1rem-nek felel meg, egy 24-es Értékek mezőbe írt szám ugyanilyen beállítás mellett 1,5rem-et ad ki, hiszen 24 osztva 16-tal 1,5. Ha közben az em környezeti betűméretet 20px-re állítja, ugyanaz a 24px-es érték 1,2em-nek felel meg, mert 24 osztva 20-szal 1,2 – jól látszik, hogy a két kimenet a két külön betűméret-mezőtől függően eltérhet egymástól.
Hibaüzenetek érvénytelen adatnál
Ha az Értékek mezőbe olyat ír, ami nem szám, az eszköz a „Adjon meg egy számot a konvertáláshoz.” üzenetet jeleníti meg. Ha a Gyökér betűméret (px) mezőbe érvénytelen – vagyis nem 0-nál nagyobb szám – kerül, az „A gyökér betűméretnek 0-nál nagyobb számnak kell lennie.” üzenet jelenik meg. Ha pedig az em környezeti betűméret (px) mezőben van érvénytelen érték, az „Az em környezeti betűméretnek 0-nál nagyobb számnak kell lennie.” üzenet látható. Mindhárom üzenet pontosan megmutatja, melyik mezőt kell javítania, mielőtt az átváltás folytatódna.
A Gyakori px → rem átváltások táblázata
Az oldalon található egy „Gyakori px → rem átváltások (16px-es alapnál)” című táblázat, amely gyakran használt pixelértékeket sorol fel a nekik megfelelő rem értékkel, 16px-es gyökér betűméretet feltételezve. Ez gyors referenciaként szolgál akkor, ha éppen nem szeretné minden egyes értéket kézzel, mezőnként kiszámoltatni az eszközzel.
Kinek hasznos ez az eszköz
Ez az eszköz elsősorban az alábbi helyzetekben segít:
- Ha fix pixelértékeket szeretne relatív rem vagy em egységekre váltani a reszponzív tervezéshez.
- Ha meg szeretné érteni, hogyan hat egy eltérő gyökér betűméret a rem értékekre.
- Ha egy adott elem betűmérete alapján szeretne em értéket kiszámolni.
- Ha biztosítani szeretné, hogy a méretezés helyesen skálázódjon akkor is, ha az olvasó megváltoztatja a böngészője alapértelmezett betűméretét.
Adatvédelem
Minden konverzió a böngészőjében fut le. Semmilyen megadott adat nem kerül feltöltésre a BroBroGo szervereire.
Gyakran Ismételt Kérdések
Mi a különbség a px, a rem és az em között?
A px egy fix hosszúságú egység. A rem az oldal gyökér (root) betűméretéhez viszonyít, így 16px-es gyökér esetén 1rem pontosan 16px. Az em pedig annak az elemnek a betűméretéhez viszonyít, amelyben elhelyezkedik. A betűméretek és térközök rem-ben történő megadása lehetővé teszi, hogy minden megfelelően skálázódjon, ha az olvasó megváltoztatja az alapértelmezett betűméretét.
Miért van külön em környezeti méret?
Az em egység a saját elemének betűméretéhez viszonyít, ami nem mindig egyezik meg a gyökérrel. Állítsa be az em környezetet az adott elem betűméretére az em érték helyes kiszámításához, vagy tartsa meg a gyökérrel azonos értéken, ha a kettő megegyezik.
Mi van akkor, ha a gyökér betűméretem nem 16px?
Módosítsa a gyökér betűméret (root font size) mezőt a CSS-ének megfelelően, és az összes rem érték azonnal frissül. Az alábbi gyors táblázat hasznos útmutatóként szolgál a legtöbb webhely által kiindulópontként használt, elterjedt 16px-es gyökérmérethez.