CSS mértékegység-átváltó
⚙️ Alapbeállítások
Alapértelmezett: 16px (böngésző alapérték)
em számításokhoz
% számításokhoz
🔄 Mértékegység-átváltó
Abszolút egység – rögzített méret, beállításoktól függetlenül
A gyökér (html) betűméretéhez viszonyítva
A szülő elem betűméretéhez viszonyítva
A szülő szélességéhez / betűméretéhez viszonyítva
Nyomdai egység: 1pt = 1/72 hüvelyk
1vw = a viewport szélességének 1%-a (alapértelmezés: 1920px)
📊 Gyors átváltási táblázat
| PX | REM | EM | % | PT | Gyakori használat |
|---|
💡 Legjobb gyakorlatok
👍 REM használata:
- • Betűméretekhez (a felhasználói beállításokkal skálázódik)
- • Belső/külső margókhoz (következetes térköz)
- • Media query töréspontokhoz
- • Komponens-méretekhez
👍 EM használata:
- • Gomb paddinghez (a betűmérettel skálázódik)
- • Sormagassághoz
- • Ikonméretekhez a szöveghez viszonyítva
- • Tipográfiai térközhöz
👍 PX használata:
- • Szegélyekhez (1px, 2px pontos)
- • Árnyékokhoz
- • Apró, precíz finomhangolásokhoz
- • Fix méretű képekhez/ikonokhoz
👍 % használata:
- • Szélesség/magasság (folyékony elrendezések)
- • Reszponzív konténerek
- • Grid oszlopok
- • Képarányok (aspect ratio)
CSS mértékegység-átváltó - px, rem, em, % kalkulátor
🎨 CSS egységek közti átváltás: pixelek (px), rem, em, százalékok (%), pontok (pt) és viewport egységek (vw, vh). Alapvető eszköz reszponzív webdesignhoz és fejlesztéshez.
CSS egységtípusok
- Abszolút egységek: px, pt, cm, mm, in - fix méret, kontextustól függetlenül
- Relatív egységek: rem, em, %, vw, vh - a szülőhöz vagy a viewportohoz igazodik
- Betűmérethez kötött: rem, em, ch, ex - betűméret alapján
- Viewporthoz kötött: vw, vh, vmin, vmax - viewport méretei alapján
Egységek magyarázata
- px (pixel): 1px = 1 eszközpixel. Abszolút egység, pontos, de nem skálázódik.
- rem: A gyökér elemhez (html) viszonyítva. 1rem = 16px alapból.
- em: A szülő elem betűméretéhez viszonyítva. Beágyazott elemeknél összeadódhat.
- %: A szülő elem tulajdonságához viszonyítva. 100% = a szülővel azonos.
- pt (pont): Nyomdai egység. 1pt = 1/72 hüvelyk ≈ 1.333px.
- vw: 1vw = a viewport szélességének 1%-a. 100vw = teljes szélesség.
- vh: 1vh = a viewport magasságának 1%-a. 100vh = teljes magasság.
Gyakori átváltások
- 1rem = 16px (böngésző alapbeállítás)
- 1em = 16px (ha a szülő 16px)
- 100% = a szülő elem mérete
- 12pt = 16px (gyakori nyomtatásban)
- 1vw = 19.2px (1920px széles viewportnál)
62,5%-os módszer
Állítsa be: html { font-size: 62.5%; }
így 1rem = 10px. Egyszerűbb számolás: 1.6rem = 16px, 2.4rem = 24px, stb.
Akadálymentességi szempontok
- Használjon rem-et betűmérethez: tiszteletben tartja a felhasználói beállításokat
- Kerülje a px-et betűméretnél: nem skálázódik a beállításokkal
- Használjon relatív egységeket: jobban működik zoomnál/nagyításnál
- Teszteljen több mérettel: 200% zoom és nagy szöveg beállítás mellett
Reszponzív design
Használjon rem-et media query-ben: @media (min-width: 48rem)
a 768px helyett. Így a töréspontok
skálázódnak a felhasználó betűméret-beállításaival.
💡 Pro tipp: Modern gyakorlat: rem a legtöbb méretezéshez (betűk, térköz, töréspontok), px a szegélyekhez és finom részletekhez, % vagy viewport egységek a layoutokhoz. Az em-et térközöknél érdemes kerülni, mert összeadódhat.
Asted Cloud
Hozzászólások (0)
Oszd meg a véleményed — kérjük, légy udvarias és maradj a témánál.
Jelentkezz be a hozzászóláshoz