lehet, hogy megértetted a rugalmas mértékegységek használatát, de még mindig nem biztos, hogy teljesen megérted, mikor kell használni a remés mikor kell használni a em. Ez a bemutató segít kitalálni!

Both emand rem rugalmas, skálázható egységek, amelyeket a böngésző pixel értékekre fordít, a tervezés betűméretének beállításaitól függően. Ha a 1em vagy 1rem értéket használja, akkor a böngészőben a 16px160px vagy bármely más értékre lefordítható.

On the other hand px values are used by the böngésző, ahogy van, így a 1px mindig pontosan 1pxjelenik meg.

Próbálja ki a csúszka ez CodePen példa, hogy lásd, milyen az értéke rem vagy em egységek lehet lefordítani más pixel értékek, míg a kifejezetten set px egységek maradj rögzített méret:

A Nagy Kérdés

A em vagy rem egységek ad, a rugalmasság, a minták, a képesség, hogy a skála elemei, fel-le, ahelyett, hogy együtt maradsz fix méretben. Használhatjuk ezt a rugalmasságot, hogy a minták könnyebb beállítani a fejlesztés során, rugalmasabb, valamint lehetővé teszi a böngésző felhasználók számára, hogy ellenőrizzék a teljes skála oldalak maximális olvashatóság.

Both em and rem az egységek biztosítják ezt a rugalmasságot és hasonló módon dolgoznak, tehát a nagy kérdés az, hogy mikor használjuk a em értékeket, és mikor használjuk a rem értékeket?

döntő különbség

a különbség a emés remegységek között az, hogy a böngésző hogyan határozza meg a px értéket. Ennek a különbségnek a megértése kulcsfontosságú annak meghatározásához, hogy mikor kell használni az egyes egységeket.

kezdjük azzal, hogy megnézzük, hogyan működik arem ésem az egységek az alapoktól kezdve dolgoznak, hogy minden részletet megismerjenek. Ezután továbblépünk arra, hogy miért kell használni a emvagy rem egységeket.

végül megvizsgáljuk annak gyakorlati alkalmazását, hogy pontosan mely tipikus tervezési elemeket kell használni az egyes típusú egységeken.

hogyan rem egységek lefordítani Pixel értékek

használata esetén rem egységek, a pixel mérete lefordítani, hogy függ a betűméret a gyökér elem az oldal, azaz a html elem. Ezt a gyökér betűméretet megszorozzuk bármilyen számmal, amelyet a rem egységgel használ.

például 16px160px, azaz 10 x 16 = 160.

Hogyan em Egységek Fordítás Pixel Értékek

Ha a em egységek, a pixel érték a végén egy szorzás a betűméret az elem, hogy stílusú.

For example, if a div has a font size of 18px10em would equate to 180px, i.e. 10 x 18 = 180.

Important to Know:

kissé elterjedt tévhit, hogy aem egységek a szülőelem betűméretéhez viszonyítva vannak. Valójában, a W3 spec szerint, ezek a “használt elem”betűméretéhez viszonyítva vannak.

szülő elem betűméretek hatással lehet em értékek, de ha ez megtörténik, ez csak azért, mert az öröklés. Vessünk egy pillantást, hogy miért, és hogyan működik ez a cselekvés.

az öröklés hatása az em egységekre

a em az egységek bonyolultabbá válhatnak az öröklés során, mivel minden elem automatikusan örökli a szülő betűméretét. Az öröklés hatását csak úgy lehet felülírni, ha kifejezetten betűméretet állít be olyan egységgel, amely nem öröklésre vonatkozik, mint például a pxvagy vw.

annak az elemnek a betűmérete, amelyenem egységeket használnak, meghatározza azok méretét. De ez az elem örökölt egy betűméretet a szülőjétől, amely betűméretet örökölt a szülőjétől stb. Mint ilyen lehetséges, hogy bármelyem értéket bármelyik szülő betűméretével lehessen végrehajtani.

nézzünk egy példát. Nyugodtan próbálja ki ezt a CodePen magad, ahogy lépünk át rajta. Ahogy megy, használja Chrome Developer Tools vagy Firebug for Firefox, hogy ellenőrizze a pixel értékek mi em egységek kerülnek kiszámításra.

példa az em öröklésre

Ha van egy oldalunk, amelynek gyökér betűmérete 16px (általában az alapértelmezett), és egy gyermek div benne a 1.5em, hogy a div örökli a 16px betűméretét a gyökérelemből. Ezért a párnázata 24px, azaz 1,5 x 16 = 24.

akkor mi van, ha egy másik div-ot az első köré tekerünk, és beállítjuk a font-size1.25em?

a wrapper div örökli a 16px gyökér betűméretét, és a font-size1.25embeállítása. Ez beállítja, hogy a div betűmérete 20px legyen, azaz 1,25 x 16 = 20.

most az eredeti div már nem közvetlenül a gyökérelemből örököl, hanem egy 20px betűméretet örököl az új szülő div-től. A 1.5em párnázási értéke most megegyezik a 30px, azaz 1,5 x 20 = 30 értékkel.

Ez a méretezési hatás még tovább súlyosbítható, ha hozzáadunk egy emalapú betűméretet az eredeti div-hoz, mondjuk 1.2em.

a div örökli a20px betűméretet a szülő, majd szorozza, hogy a saját1.2em beállítás, így ez egy új betűméret24px, azaz 1.2 x 20 = 24.

a1.5em a div-on a padding most ismét megváltozik a méretben az új betűmérettel, ezúttal36px, azaz 1,5 x 24 = 36.

Végre, bemutatni, hogy a em egységek relatív, hogy a betűméret, a elemet használtak fel, (nem a szülő elem), lássuk, mi történik a padding 1.5em ha kifejezetten állítsa be a div használni betűméret a 14px érték alá nem tartozó örökség.

most a párnázatunk 21PX-re csökkent, azaz 1, 5 x 14 = 21. Ez nem befolyásolja a betűméret a szülő elem.

mindezek a komplikációk lehetősége mellett láthatja, miért fontos tudni, hogyan kell használni a em egységeket kezelhető módon.

A böngésző beállításainak hatása a HTML elem Betűméretére

alapértelmezés szerint a böngészők általában 16PX betűmérettel rendelkeznek, de ezt a felhasználó bárhol 9PX-ről 72px-re változtathatja.

fontos tudni:

a gyökér html elem örökli betűméretét a böngésző beállításaiból, kivéve, ha kifejezetten rögzített értékkel felülírja.

tehát míg a html elem betűmérete határozza meg közvetlenül a rem értékeket, ez a betűméret először a böngésző beállításaiból származhat.

így böngésző betűméret beállítások hatással lehet az értéke minden rem használt egység a design, valamint minden em egység keresztül öröklés.

böngésző beállítási hatása, ha nincs HTML betűméret beállítva

hacsak felülírják, ahtml elem örökölni fogja a böngésző alapértelmezett betűméretbeállítását. Vegyünk például egy olyan webhelyet, ahol a font-size tulajdonság a html elemen van beállítva.

Ha a felhasználó böngészője alapértelmezett betűmérete 16PX, akkor a gyökér betűméret 16PX lesz. A Chrome Developer Tools alkalmazásban láthatja, hogy egy elem mit örökölt az örökölt tulajdonságok megjelenítése a számított fül alatt.

ebben az esetben 10rem160px, azaz 10 x 16 = 160.

Ha a felhasználó eléri a böngésző betűméretét 18px-ig, a gyökér betűméret 18PX lesz. Most 10rem180px, azaz 10 x 18 = 180.

Böngésző Beállítás Effektus em Egység HTML Font Size

Ha egy em alapú betűméret beállítása a html elem a pixel érték azt jelenti, hogy lesz több a böngésző betűméret beállítása.

például, ha a webhely html eleme font-size1.25em volt, a gyökér betűméret a böngésző betűméretének 1,25-szerese lenne.

Ha a böngésző betűmérete16px, a gyökér betűméret20px, azaz 1, 25 x 16 = 20.

ebben az esetben 10rem egyenlő lenne 200px, azaz 10 x 20 = 200.

azonban, ha a böngésző betűmérete 20px, a gyökér betűméret inkább 25px, azaz 1,25 x 20 = 25.

Now 10rem250px, azaz 10 x 25 = 250.

Összefoglaló em vs rem Különbség

Mi a fenti mondanivalója ez:

• Fordítása rem egységek pixel érték határozza meg a betűméret, a html elem. Ezt a betűméretet befolyásolja a böngésző betűméret beállításának öröklése, kivéve, ha kifejezetten felülírják az öröklés alá nem tartozó egységgel.

• fordítása em egységek pixel értékek határozza meg a betűméret az elem ők használják. Ezt a betűméretet a szülőelemek öröklése befolyásolja, kivéve, ha kifejezetten felülírják az öröklés alá nem tartozó egységgel.

miért érdemes rem egységeket használni?:

a legnagyobb teljesítmény, amelyet a rem egységek kínálnak, nem csak az, hogy következetes méretezést adnak az elem öröklésétől függetlenül. Inkább az, hogy olyan módot adnak nekünk, hogy a felhasználói betűméret beállításai befolyásolják a webhely elrendezésének minden egyes aspektusát a rem egységek használatával, ahol a px egységeket használtuk.

ezért a rem egységek használatának elsődleges célja annak biztosítása, hogy a felhasználó alapértelmezett betűmérete beállítható legyen, az elrendezés a benne lévő szöveg méretének megfelelően módosul.

egy webhelyet eredetileg a leggyakoribb alapértelmezett böngésző betűméretre összpontosítva lehet megtervezni 16PX.

de a rem egységek használatával, ha a felhasználó növekszik a betűméretük, az elrendezés integritása megmarad, és a szöveg nem kerül összetapadásra egy kisebb szöveghez tervezett merev térben.

és ha a felhasználó csökkenti a betűméretet, a teljes elrendezés lecsökken, és nem marad egy apró foltos szöveg egy a fehér tér pusztasága.

a felhasználók a betűméret beállításait mindenféle okból megváltoztatják, a feszült látástól kezdve az olyan eszközök optimális beállításainak megválasztásáig, amelyek mérete és a megtekintési távolság nagymértékben eltérhet. Ezeknek a beállításoknak a beillesztése sokkal jobb felhasználói élményeket tesz lehetővé.

fontos tudni:

egyes tervezők arem alapú elrendezéseket használják egy fixpx unitfont-size beállítással ahtml elemen. Ez általában úgy történik, hogy a betűméret változása a html elemen felfelé vagy lefelé méretezheti a tervezést.

erősen javaslom ezt, mivel felülbírálja a betűméretet ahtml elem örököl a felhasználó böngészőbeállításaitól. Ez megakadályozza, hogy a Beállítások bármilyen hatást fejtsenek ki, és eltávolítja a felhasználó optimalizálási képességét a legjobb megtekintés érdekében.

Ha meg akarja változtatni a betűméretet a htmlelemen, akkor tegye ezt egy emvagy rem értékkel, mivel a gyökér betűméret továbbra is a felhasználó böngészőjének betűméretének többszöröse lesz.

Ez továbbra is lehetővé teszi a tervezés felfelé vagy lefelé történő méretezését a html elem betűméretének megváltoztatásával, de megőrzi a felhasználói böngésző beállításainak hatását.

miért használja em egységek

a kulcs érték em egységek ajánlat lehetővé teszik méretezés értékeket kell meghatározni egy betűméret eltérő a html elem.

ezért a em egységek elsődleges céljának lehetővé kell tennie a skálázhatóságot egy adott tervezési elem összefüggésében.

például a paddingmargin és line-height egy navigációs menüpont körül a em értékeket lehet beállítani.

így, ha megváltoztatja a menü betűméretét, a menüelemek körüli távolság arányosan, az elrendezés többi részétől függetlenül.

az öröklés korábbi szakaszában látta, hogy milyen gyorsan nyomon követi a em az egységek kicsúszhatnak a kezükből. Ezért csak a em egységek használatát javaslom, ha egyértelműen szükség van rájuk.

gyakorlati alkalmazás

lehet némi vita között web tervezők és biztos vagyok benne, különböző emberek különböző előnyös megközelítések, azonban az én ajánlás A következő.

használja em egységek:

minden méretezés, hogy kell méretezni attól függően, hogy a betűméret egy elem nem a gyökér.

általánosságban elmondható, hogy az egyetlen ok, amiért a em egységeket kell használni, egy olyan elem méretezése, amely nem alapértelmezett betűmérettel rendelkezik.

a fenti példánk szerint az olyan tervezési összetevők, mint a menüelemek, a gombok és a címsorok, rendelkezhetnek saját, kifejezetten megadott betűmérettel. Ha megváltoztatja ezeket a betűméreteket, azt szeretné, hogy a teljes összetevő arányosan méretezzen.

közös tulajdonságok ez az iránymutatás a következőkre vonatkozik: marginpaddingwidthheight és line-height beállítások, ha nem alapértelmezett betűmérettel rendelkező elemeken használják.

azt javaslom, hogy ha foglalkoztatem egységek, az elem betűméretét, amelyen használják őket, arem egységekben kell beállítani a skálázhatóság megőrzése érdekében, de az öröklési zavar elkerülése érdekében.

általában Ne használja a em A

Betűméretekhez tartozó egységeket meglehetősen gyakori a em betűméretekhez használt egységek, különösen a címsorokban, azonban azt javaslom, hogy a minták kezelhetőbbek, ha rem az egységeket általában betűtípusokhoz használják méretezés.

az okcímek gyakran használják aem egységeket, jobb választás, mint apx egységek, a normál szövegmérethez viszonyítva. Azonban rem egységek egyaránt jól elérhetik ezt a célt. Ha a html elemen bármilyen betűméret-beállítás történik, akkor a címsorméretek is skálázódnak.

próbálja meg megváltoztatni aem betűméretet a html elem ebben a kódban, hogy megnézze magának:

gyakrabban, mint nem, nem akarjuk, hogy a betűméreteink a gyökéren kívüli bármely elem alapján skálázódjanak, csak néhány kivétellel.

egy példa, ahol érdemes lehet em alapú betűtípus méretezés lehet egy legördülő menü, ahol van második szintű menüpont szöveg méretezve attól függően, hogy a betűméret az első szinten. Egy másik példa lehet egy gomb belsejében használt betű ikon, ahol az ikon méretének a gomb szövegméretéhez kell kapcsolódnia.

azonban a Webdizájn legtöbb eleme általában nem rendelkezik ilyen típusú követelményekkel, így általában a rem betűméretezési egységeket szeretné használni, a em csak akkor, ha kifejezetten szükséges.

használja rem egységek:

bármilyen méretezés, amely nem kell em egységek a fent leírt okok miatt, és hogy kell skála függően böngésző betűméret beállításokat.

Ez magyarázza, hogy szinte minden standard design, beleértve a legtöbb magasságtól, a legtöbb szélességben, a legtöbb padding, a legtöbb margók, határ szélességét, a legtöbb betűméret, árnyak, gyakorlatilag majdnem minden része az elrendezés.

dióhéjban mindent, ami skálázhatóvá tehető a rem egységekkel.

Tip

elrendezések létrehozásakor gyakran könnyebb képpontokban gondolkodni, de a kimenet rem egységekben.

akkor pixel rem számítások automatikusan történik egy preprocesszor, mint a Stylus / Sass / Less, vagy egy postprocesszor, mint PostCSS a pxtorem plugin.

Alternatív megoldásként a pxtoem használatával manuálisan is elvégezheti a konverziókat.

mindig használja a rem Media Queries

fontos, hogy a rem egységek használata esetén a Média lekérdezéseknek a rem egységekben kell lenniük. Ez biztosítja, hogy a felhasználó böngészőjének betűméretétől függetlenül a Média lekérdezései reagálni fognak rá, és módosítják az elrendezést.

például, ha egy felhasználó nagyon magasra méretezi a szöveget, előfordulhat, hogy az elrendezésnek két oszlopról egyetlen oszlopra kell kattintania, ugyanúgy, mint egy kisebb, árnyékolt mobileszközön.

Ha a töréspontok rögzített képpontszélességben vannak, csak egy másik nézetablak mérete válthatja ki őket. A rem alapú töréspontokkal azonban különböző betűméretekre is reagálnak.

ne használja az em-et vagy a rem-et:

Multi Column Layout Widths

oszlopszélesség egy elrendezésben általában % alapul, így folyékonyan illeszkednek kiszámíthatatlanul méretű nézetportok.

azonban egyes oszlopok még mindig általában bele remértékek keresztül max-width beállítás.

például:

.container { width: 100%; max-width: 75rem;}

Ez az oszlop rugalmas és skálázható marad, de megakadályozza, hogy túl széles legyen ahhoz, hogy a benne lévő szöveg kényelmesen olvasható legyen.

ha egy elemnek szigorúan kezelhetetlennek kell lennie

egy tipikus webdizájnban nem lesz sok olyan része az elrendezésnek, amelyet nem lehet méretezhetőségre tervezni. Időnként azonban olyan elemekkel találkozhat, amelyeknek valóban explicit rögzített értékeket kell használniuk a méretezés megakadályozása érdekében.

a rögzített méretezési értékek alkalmazásának előfeltétele az, hogy ha a szóban forgó elemet méretezték, akkor megszakad. Ez tényleg nem jön fel gyakran, így mielőtt a kísértés, hogy ostor ki azokat px egységek, kérdezd meg magadtól, ha használja őket abszolút szükségszerűség.

becsomagolás

csak egy gyors golyó pontban foglaljuk össze, hogy mi fedeztük:

• rem vagy em egységek számítása a pixel értékek a böngésző által, alapján betűméret a design.
• em az egységek a használt elem betűméretén alapulnak.
• remaz egységek ahtml elem betűméretén alapulnak.
• em az egységeket befolyásolhatja a betűméret öröklése bármely szülő elemből

• rem az egységeket befolyásolhatja a betűméret öröklése a böngésző betűbeállításaiból.

• használja aem méretezési egységeket, amelyeknek a gyökértől eltérő elem betűméretétől függően kell méretezniük.
• Use remunits for sizing that doesn ‘ t need em units, and that should scale depending on browser font settings.
• Userem units if you ‘ re sure you needem units, including on font size.
• Userem units on media queries
• ne használja aem vagyrem in multi column layout widths – use% helyett.
• ne használja a emvagy rem, ha a méretezés elkerülhetetlenül megszakítja az elrendezési elemet.

remélem, most már épített egy robusztus és teljes képet, hogy pontosan hogyan em és rem egységek működnek, és ezen keresztül tudja, hogyan lehet a legjobban kihasználni őket a tervek.

azt javasoljuk, hogy próbálja ki a használati útmutató tartalmazza ezt a bemutatót magad, és élvezze a teljes körű skálázhatóság és válaszkészség az elrendezések lehetővé teszik, hogy hozzon létre.