Pixelből EM
Konvertálja a px-et em-re a szülőelem betűméretével. em relatív a közvetlen szülőhöz — akkor hasznos, ha egy gomb kitöltése méreteződik a címke szövegével, vagy ha a beágyazott lista behúzása követi a helyi törzsméretet. Képlet: em = px ÷ parentFontSizePx.
Pixel
Szülő betűméret (px)
Eredmény
1em
Px konvertálása em-re
1. Határozza meg a szülőelem betűméretét px-ben (pl. 18 px).
2. Add meg a konvertálandó px értéket 9 px (pl. betűköz).
3. Olvassa be az eredményt (9 ÷ 18 = 0,5 em).
4. Alkalmazza a CSS-ben az adott szülő kontextushoz tartozó gyermekelemre.
Px to em példák
Gombtömítés
Szülőbetűtípus 16 px; függőleges kitöltés 8 px → 0,5 em. Méretez, ha a szülő 18 px lesz a nagy képernyőkön.
Beágyazott címsor
Szakasz betűtípus 20 px; alcím 24 képpontos kialakítás → 1,2 em a szakaszhoz viszonyítva, nem a gyökérhez.
Ikonigazítás
Inline ikon 14 px 16 px szövegsorral → 0,875 em ikondoboz szöveges metrikákhoz igazodik.
Mikor használd ezt az eszközt
• Amikor az összetevők belső elemeinek méretezniük kell a helyi betűméret változásával.
• Ha olyan formázott szöveget alakít ki, ahol a címsorok különböző méretű tárolókban helyezkednek el.
• Ha az örökölt CSS-t használta, és az új képpont-terveket ugyanabba a rendszerbe képezi le.
Mikor válassz mást
• Ha az egész webhelyre kiterjedő következetes térközt szeretnél, a gyökértől való távolság egyszerűbb.
• Amikor a mély egymásba ágyazás okozza a hibákat margók.
• Ha nézetablakhoz viszonyított méretezésre van szüksége — használd a vw/vh-t.
Az összetett buktatók elkerülése
Mélyen egymásba ágyazott menük betűmérettel: 0,9 em minden szinten váratlanul csökkenti a szöveget. Szerkezeti szinteken előnyben részesítse a rem-et a betűmérethez; használd az em-et az egyik szülőhöz kötött helyi paddinghoz. Dokumentálja a szülő feltevéseket a tervezési jogkivonatokban.
em a médialekérdezésekhez?
A médialekérdezés em egységei történelmileg hivatkozott böngésző alapértelmezett (16 px), nem komponens szülő. A modern reszponzív kialakítás gyakran használ rem vagy px töréspontokat — tudja, hogy a stíluslap melyik kontextust célozza meg.
Gyakori kérdések
Mi a különbség az em és a rem között?
em hivatkozik a szülő betűméretre; A rem csak a gyökér (html) betűméretre hivatkozik.
Miért a beágyazott em összetett?
Minden szint szoroz: 1,2 em az 1,2 em szülőn belül = 1,44 × gyökér, ha mindkettő vonatkozik a betűméret-láncokra.
Képlet?
em = px ÷ parentFontSizePx. Mindig a közvetlen szülő kiszámított betűméretét használd.
Kitöltés az em-ben?
Igen — a kitöltés/margó em skálán az elem saját betűméretével (margóhoz/kitöltéshez a specifikáció az elem betűméretét használd).
Mikor keletkezett az em?
Hagyományosan "nagybetű szélessége M" fém típusban; most a betűmérethez viszonyítva van megadva a CSS-ben.
Fel vannak töltve adatok?
Nem. Az átalakítás helyben fut.