Ugrás a tartalomhoz
TextArray
100% helyi

CSS mértékegység-átváltó

Válts át CSS hosszakat px, rem, em, pt és % között tetszőleges alapmérettel.

Bemenet
Kimenet

CSS mértékegység-átváltó

Illessz be CSS értékeket soronként egyet — 16px, 1.5rem, 12pt, 150% —, és az átváltó azonnal átszámolja őket. A puszta szám a „Kiinduló egység" mezőben beállított egységben értendő, a sorba írt egység viszont mindig elsőbbséget élvez, így egy listában nyugodtan keverhetsz pixelt és remet. A célt a „Célegység" mezőben választod ki, vagy válaszd a „Minden egység" lehetőséget, és egyben látod a teljes láncot: 16px = 1rem = 12pt = 100%. A nem tiszta értéket tartalmazó sorok változatlanul kerülnek a kimenetbe — egy eltévedt komment sosem töri el az átváltást.

Az egész számítás egyetlen számon múlik: az alapméreten, vagyis a gyökérelem betűméretén pixelben. A böngészők alapértelmezése 16px — ezért ér 1rem általában 16px-t, a 100% pedig az alapnak felel meg. Állítsd az alapot 10-re a klasszikus 62,5%-os trükkhöz, ahol az 1,5rem pontosan 15px, vagy igazítsd a saját design rendszeredhez. A pontokat maga a CSS rögzíti: 1px egy hüvelyk 1/96-a, 1pt pedig 1/72-e, így 16px pontosan 12pt, az alaptól függetlenül. A tizedesjegyek beállítás legfeljebb hat jegyre korlátozza a pontosságot, a záró nullák pedig lemaradnak.

A rem az akadálymentesség egysége: együtt skálázódik a böngészőben beállított betűmérettel, így a remben megadott szöveg nő, ha valaki megemeli az alapértelmezett méretet, míg a pixel fix marad. Az em itt ugyanúgy számol, de valódi stíluslapban az elem saját betűméretéhez viszonyít, ezért az egymásba ágyazott em értékek összeszorzódnak, a rem viszont nem — az átváltó a lapos, gyökérhez viszonyított esetet feltételezi.

Minden helyben, a böngésződben fut — semmi sem töltődik fel, semmire sem kell várni. Az átváltott listát egy kattintással kimásolod vagy .txt fájlként letöltöd.

Gyakori kérdések

Miért használjak remet px helyett?
A rem értékek együtt skálázódnak a böngészőben beállított betűmérettel — aki nagyobb szöveget igényel, valóban meg is kapja. A pixel figyelmen kívül hagyja ezt a beállítást. Egy px alapú design átállítása remre az egyik legolcsóbb akadálymentesítési nyereség.
Mi az alapméret, és miért 16 az alapértelmezés?
A gyökérelem betűmérete pixelben — ehhez viszonyít az 1rem, az 1em és a 100%. Minden nagy böngésző 16px-lel indul, így a 16 a helyes alap, hacsak a stíluslapod nem módosítja a gyökeret — a html { font-size: 62.5% } például 10-re állítja.
Mi a különbség az em és a rem között?
A rem mindig a gyökér betűméretéhez viszonyít; az em az aktuális elemhez, így az egymásba ágyazott em értékek összeszorzódnak. Ez az átváltó mindkettőt az egyetlen alapmérethez számolja — a lapos esethez. Mélyen ágyazott kódban a valódi em értékek eltérhetnek.
Mi történik azokkal a sorokkal, amelyek nem értékek?
Változatlanul kerülnek a kimenetbe, és az összegzés kihagyottként számolja őket. Csak a tiszta értékek váltódnak át, mint a 16px, az 1.5rem vagy a puszta szám — a teljes CSS deklarációk szándékosan kimaradnak.
Feltöltődik valahová a szövegem?
Nem. Az eszköz teljes egészében a böngésződben fut, és a bemenet soha nem hagyja el az eszközödet.