Konvertáljon pixel (PX), root em (REM) és em (EM) CSS egységeket ezzel az egyszerű számológéppel. Elengedhetetlen a reszponzív webdesignhoz és fejlesztéshez.
Konvertálj a pixelek (PX), gyökér em (REM) és em (EM) egységek között. Írj be egy értéket bármelyik mezőbe, hogy lásd az egyenértékű értékeket a többi egységben.
A CSS egységek megértése és átváltása elengedhetetlen a reszponzív webdesign és fejlesztés szempontjából. A PX (pixel), REM (root em) és EM egységek alapvető építőelemek, amelyek meghatározzák, hogyan vannak méretezve és elhelyezve az elemek különböző eszközökön és képernyőméreteken. Ez a átfogó egység átváltó eszköz lehetővé teszi, hogy könnyedén átkonvertálja az értékeket e három kritikus CSS egység között, segítve ezzel a rugalmasabb és karbantarthatóbb webes elrendezések létrehozását.
A pixel (PX) fix méretű egység, amely pontos irányítást biztosít, de nem skálázható, míg a REM egységek a gyökérelem betűméretéhez viszonyítva skálázódnak, az EM egységek pedig a szülőelem betűméretéhez viszonyítva. Az e egységek közötti átváltás kihívást jelenthet, különösen bonyolult tervek esetén vagy amikor hozzáférhetőségi funkciókat, például a szövegméret módosítását támogatják. A PX, REM és EM átváltónk leegyszerűsíti ezt a folyamatot, lehetővé téve, hogy a gyönyörű, reszponzív tervek létrehozására összpontosítson.
A pixelek (PX) a legalapvetőbb és leggyakrabban használt CSS egységek. Egy pixel egyetlen pont egy digitális kép rácsában, és a legkisebb ellenőrizhető elem a képernyőn. A CSS-ben a pixelek fix méretű mértékegységet biztosítanak, amely független az egyéb stílusfaktoroktól.
1.element {
2 width: 200px;
3 font-size: 16px;
4 margin: 10px;
5}
6A pixelek kulcsfontosságú jellemzői:
A REM (root em) egységek relatív egységek, amelyek a gyökérelem betűméretéhez (tipikusan a <html> elemhez) viszonyítva skálázódnak. Alapértelmezés szerint a legtöbb böngésző 16px-re állítja a gyökér betűméretet, így 1rem egyenlő 16px-sel, hacsak kifejezetten nem változtatják meg.
1html {
2 font-size: 16px; /* Alapértelmezett a legtöbb böngészőben */
3}
4
5.element {
6 width: 12.5rem; /* Egyenlő 200px-sel az alapértelmezett gyökér betűmérettel */
7 font-size: 1rem; /* Egyenlő 16px-sel */
8 margin: 0.625rem; /* Egyenlő 10px-sel */
9}
10A REM egységek kulcsfontosságú jellemzői:
Az EM egységek relatív egységek, amelyek a szülőelem betűméretéhez viszonyítva skálázódnak. Ha a szülőelemhez nem adnak meg betűméretet, az EM-ek az örökölt betűméretet veszik alapul.
1.parent {
2 font-size: 20px;
3}
4
5.child {
6 font-size: 0.8em; /* Egyenlő 16px-sel (20px × 0.8) */
7 margin: 0.5em; /* Egyenlő 8px-sel (16px × 0.5) */
8}
9Az EM egységek kulcsfontosságú jellemzői:
A PX, REM és EM egységek közötti matematikai kapcsolatok megértése kulcsfontosságú a pontos átváltásokhoz. Íme a képletek, amelyeket az átváltónk használ:
A pixelek REM egységekre való átváltásához oszd el a pixel értéket a gyökér betűmérettel:
Például, az alapértelmezett gyökér betűméret 16px:
A pixelek EM egységekre való átváltásához oszd el a pixel értéket a szülőelem betűméretével:
Például, ha a szülő betűméret 16px:
A REM egységek pixelekre való átváltásához szorozd meg a REM értéket a gyökér betűmérettel:
Például, az alapértelmezett gyökér betűméret 16px:
Az EM egységek pixelekre való átváltásához szorozd meg az EM értéket a szülőelem betűméretével:
Például, ha a szülő betűméret 16px:
A REM egységek EM egységekre való átváltásához figyelembe kell venni a gyökér betűméretet és a szülőelem betűméretét:
Ha a gyökér és a szülő betűméret azonos (pl. 16px), akkor 1rem = 1em.
Az EM egységek REM egységekre való átváltásához használd a következő képletet:
Ismét, ha mindkét betűméret egyenlő, akkor 1em = 1rem.
Egység átváltó eszközünk megkönnyíti az értékek átkonvertálását PX, REM és EM egységek között. Íme egy lépésről lépésre útmutató az átváltó hatékony használatához:
<html> betűméret értékénekA CSS egységek közötti átváltás megértése és használata kulcsfontosságú a hatékony webfejlesztéshez. Íme néhány gyakorlati alkalmazás és forgatókönyv, ahol az átváltónk felbecsülhetetlen értékű:
Az egységek közötti átváltás elengedhetetlen a valóban reszponzív tervek létrehozásához:
1/* Fix pixel értékek átkonvertálása reszponzív REM egységekre */
2.container {
3 /* Eredeti: padding: 20px; */
4 padding: 1.25rem; /* 20px ÷ 16px = 1.25rem */
5
6 /* Eredeti: margin-bottom: 32px; */
7 margin-bottom: 2rem; /* 32px ÷ 16px = 2rem */
8}
9A relatív egységek használata javítja a hozzáférhetőséget a felhasználói preferenciák tiszteletben tartásával:
A modern tervezési rendszerek profitálnak a gondos egységhasználatból:
A harmonikus tipográfia létrehozása gondos egységválasztást igényel:
1/* Tipográfiai rendszer REM egységekkel */
2h1 { font-size: 2.5rem; } /* 40px */
3h2 { font-size: 2rem; } /* 32px */
4h3 { font-size: 1.5rem; } /* 24px */
5h4 { font-size: 1.25rem; } /* 20px */
6p { font-size: 1rem; } /* 16px */
7small { font-size: 0.875rem; } /* 14px */
8Amikor olyan terveket valósítasz meg, mint a Figma vagy Photoshop:
Bár a PX, REM és EM a leggyakoribb egységek, vannak alternatívák, amelyeket érdemes figyelembe venni:
A CSS egységek története a webdesign szélesebb fejlődését tükrözi, a statikus elrendezésektől a mai reszponzív, hozzáférhető megközelítésekig.
A CSS korai napjaiban a pixelek uralkodtak. A webtervezők fix szélességű elrendezéseket készítettek, jellemzően 640px vagy 800px szélesek, hogy megfeleljenek a gyakori képernyőfelbontásoknak. A hozzáférhetőség és az eszközök sokfélesége nem volt nagyobb aggodalomra ok, és a pixel-pontos irányítás volt a fő cél.
Ahogy a képernyőméretek sokfélesége növekedett, a százalékos alapú elrendezések népszerűsége nőtt. A tervezők elkezdték rugalmasabb dizájnok létrehozását, bár a tipográfia gyakran pixel egységekben maradt. Ez az időszak látta az EM egységek bevezetését a CSS-ben, bár a bonyolultság miatt a használatuk korlátozott volt.
Az iPhone 2007-es bevezetése forradalmasította a webdesign-t. Hirtelen a weboldalaknak működniük kellett olyan képernyőkön, amelyek csak 320px szélesek. Ez felgyorsította az érdeklődést a reszponzív tervezési technikák és a relatív egységek iránt. Az EM egységek korlátai (különösen a cascading hatás) egyre nyilvánvalóbbá váltak, ahogy a tervek bonyolultabbá váltak.
Ethan Marcotte 2010-es, reszponzív webdesignról szóló hatásos cikkje megváltoztatta, ahogy a fejlesztők a CSS egységekre tekintettek. A REM egység bevezetésre került a CSS3-ban, amely a relatív skálázás előnyeit kínálta anélkül, hogy az EM egységek bonyolultságával kellett volna foglalkozni. A böngésző támogatása a REM egységek számára fokozatosan nőtt ebben az időszakban.
A mai webfejlesztés vegyes egységeket ölel fel különböző célokra:
Ez a fejlődés tükrözi a web átmenetét egy dokumentum-alapú médiából egy összetett alkalmazásplatformmá, amelynek működnie kell számtalan eszközön és kontextusban.
1// Átváltás PX, REM és EM egységek között
2const pxToRem = (px, rootFontSize = 16) => {
3 return px / rootFontSize;
4};
5
6const pxToEm = (px, parentFontSize = 16) => {
7 return px / parentFontSize;
8};
9
10const remToPx = (rem, rootFontSize = 16) => {
11 return rem * rootFontSize;
12};
13
14const emToPx = (em, parentFontSize = 16) => {
15 return em * parentFontSize;
16};
17
18const remToEm = (rem, rootFontSize = 16, parentFontSize = 16) => {
19 return rem * (rootFontSize / parentFontSize);
20};
21
22const emToRem = (em, parentFontSize = 16, rootFontSize = 16) => {
23 return em * (parentFontSize / rootFontSize);
24};
25
26// Példa használat
27console.log(pxToRem(24)); // 1.5
28console.log(remToPx(1.5)); // 24
29console.log(pxToEm(24, 24)); // 1
30console.log(remToEm(2, 16, 32)); // 1
311:root {
2 /* Alap betűméretek */
3 --root-font-size: 16px;
4 --base-font-size: var(--root-font-size);
5
6 /* Gyakori pixel értékek átkonvertálva REM-re */
7 --space-4px: 0.25rem;
8 --space-8px: 0.5rem;
9 --space-16px: 1rem;
10 --space-24px: 1.5rem;
11 --space-32px: 2rem;
12 --space-48px: 3rem;
13
14 /* Tipográfiai skála */
15 --text-xs: 0.75rem; /* 12px */
16 --text-sm: 0.875rem; /* 14px */
17 --text-base: 1rem; /* 16px */
18 --text-lg: 1.125rem; /* 18px */
19 --text-xl: 1.25rem; /* 20px */
20 --text-2xl: 1.5rem; /* 24px */
21}
22
23/* Példa használat */
24.card {
25 padding: var(--space-16px);
26 margin-bottom: var(--space-24px);
27 font-size: var(--text-base);
28}
29
30.card-title {
31 font-size: var(--text-xl);
32 margin-bottom: var(--space-8px);
33}
341// SCSS függvények az egység átváltásra
2@function px-to-rem($px, $root-font-size: 16) {
3 @return ($px / $root-font-size) * 1rem;
4}
5
6@function px-to-em($px, $parent-font-size: 16) {
7 @return ($px / $parent-font-size) * 1em;
8}
9
10@function rem-to-px($rem, $root-font-size: 16) {
11 @return $rem * $root-font-size * 1px;
12}
13
14// Példa használat
15.element {
16 padding: px-to-rem(20);
17 margin: px-to-rem(32);
18 font-size: px-to-rem(18);
19
20 .nested {
21 // A szülő betűméret (18px) használata az em átváltáshoz
22 padding: px-to-em(16, 18);
23 margin-bottom: px-to-em(24, 18);
24 }
25}
261def px_to_rem(px, root_font_size=16):
2 """Konvertálj pixeleket REM egységekre"""
3 return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6 """Konvertálj REM egységeket pixelekre"""
7 return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10 """Konvertálj pixeleket EM egységekre"""
11 return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14 """Konvertálj EM egységeket pixelekre"""
15 return em * parent_font_size
16
17# Példa használat
18print(f"16px = {px_to_rem(16)}rem") # 16px = 1.0rem
19print(f"2rem = {rem_to_px(2)}px") # 2rem = 32px
20print(f"24px = {px_to_em(24, 16)}em") # 24px = 1.5em
21A REM (root em) egységek a gyökér elem betűméretéhez (tipikusan a <html> elemhez) viszonyítva relatívak, míg az EM egységek a szülőelem betűméretéhez viszonyítva relatívak. Ez a kulcsfontosságú különbség azt jelenti, hogy a REM egységek megtartják a következetes méretezést az egész dokumentumban, függetlenül a beágyazástól, míg az EM egységek kumulatív hatást gyakorolhatnak, ha beágyazottak.
Nincs egyetlen "legjobb" egység minden helyzetre. A legjobban általában az egységek kombinációja működik:
Az ideális megközelítés az, hogy minden egységet arra használj, amire a legjobban megfelel egy koherens rendszer keretein belül.
A 16px alapértelmezett beállítást olvashatósági standardként állapították meg, amely jól működik különböző eszközökön. A kutatások azt mutatták, hogy a körülbelül 16px méretű szöveg optimális az olvasáshoz a képernyőkön, tipikus nézőtávolságokon. Ez az alapérték egy jó alapot is biztosít a hozzáférhetőség szempontjából, biztosítva, hogy a szöveg ne legyen túl kicsi a legtöbb felhasználó számára.
Igen, a CSS támogatja a negatív értékeket sok tulajdonságnál bármely egységtípus használatával. A negatív margók, transzlációk és pozíciók gyakori használati esetek. Az átváltónk helyesen kezeli a negatív értékeket minden egységtípus esetén.
Az EM egységek kumulatív hatást gyakorolnak, amikor beágyazottak. Például:
1.parent {
2 font-size: 16px;
3}
4.child {
5 font-size: 1.5em; /* 24px (16px × 1.5) */
6}
7.grandchild {
8 font-size: 1.5em; /* 36px (24px × 1.5) */
9}
10Ez a kumulatív hatás hasznos lehet arányos tervek létrehozásához, de gondos kezelést igényel, hogy elkerüljük a nem kívánt skálázást.
A nagy DPI kijelzők automatikusan kezelve vannak, amikor relatív egységeket, például REM és EM-t használsz. Mivel ezek az egységek a betűméret alapján készülnek, megfelelően skálázódnak a nagy felbontású képernyőkön. Képek és határok esetén érdemes média lekérdezéseket használni a készülék-pixel arány vagy a felbontás alapján.
A REM és EM egységek böngészőben való támogatása jelentősen javult. Média lekérdezésekben az EM egységek használata általában ajánlott, mert:
1/* EM egységek használata média lekérdezésekben */
2@media (min-width: 48em) { /* 768px 16px alapértelmezett */
3 /* Tablet stílusok */
4}
5
6@media (min-width: 64em) { /* 1024px 16px alapértelmezett */
7 /* Asztali stílusok */
8}
9A legtöbb tervezőeszköz elsősorban pixelekkel dolgozik. Amikor terveket valósítasz meg:
Néhány tervezőeszköz rendelkezik olyan bővítményekkel, amelyek automatikusan segíthetnek az átváltási folyamatban.
A böngészők különbözően kezelik a szubpixel értékeket. Néhány böngésző a legközelebbi pixelre kerekít, míg mások támogatják a szubpixel renderelést a simább skálázás érdekében. Ez alkalmanként kisebb eltéréseket okozhat a böngészők között, különösen kis REM/EM értékek vagy transzformációk használatakor. A legtöbb esetben ezek a különbségek elhanyagolhatók.
A modern böngészőkben nincs jelentős teljesítménykülönbség a pixelek, REM vagy EM egységek használata között. Az egységek kiválasztását a tervezési követelmények, a reszponzív viselkedés és a hozzáférhetőségi igények alapján kell megválasztani, nem pedig a teljesítmény szempontjából.
"CSS Values and Units Module Level 3." W3C Ajánlás. https://www.w3.org/TR/css-values-3/
Marcotte, Ethan. "Responsive Web Design." A List Apart, 2010. május 25. https://alistapart.com/article/responsive-web-design/
Rutter, Richard. "The Elements of Typographic Style Applied to the Web." http://webtypography.net/
"CSS Units." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
"CSS Pixels vs. Physical Pixels." Stack Overflow Documentation. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels
Coyier, Chris. "The Lengths of CSS." CSS-Tricks. https://css-tricks.com/the-lengths-of-css/
"Using CSS custom properties (variables)." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
"Understanding and Using rem Units in CSS." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
Ne szenvedj a manuális CSS egység átváltásokkal, és hagyd, hogy a PX, REM és EM Egység Átváltó elvégezze a munkát helyetted. Akár reszponzív weboldalt építesz, tervezési rendszert hozol létre, vagy csak a CSS egységekről tanulsz, ez az eszköz időt takarít meg és biztosítja a pontosságot. Írd be az értékeidet most, hogy lásd, mennyire egyszerű lehet az egység átváltás!
Fedezzen fel több olyan eszközt, amely hasznos lehet a munkafolyamatához