Tervezzen egy érzékeny helyet EM-alapú méretezéssel

Jan 24, 2026

kézikönyv

Valószínűleg hallottad, hogy a betűmérethez relatív egységeket kell használnia. Ez jó szabály a hozzáférhető webdesign számára; Ha a felhasználó megváltoztatja a böngésző alapértelmezett betűméretét, ez lehetővé teszi az oldal szövegét ennek megfelelően átméretezni. Lehet, hogy ezt a tanácsot vette, és a kapcsolót. Talán kiszállt a számológéped, és az Absolute-tól átalakította webhelyének betűtípusait px EMS-hez vagy valószínűbb, REMS.

De ha ez az, ahol megállt, akkor hiányzik egy csomó rugalmasság és erő, amelyet az EMS hozza a böngésző. Az EM egység nem egyszerűen csere az ismerős px ; Több tulajdonsággal használhatja, mint csak betűméret . Ha igen, néhány más előnye elkezdődik.

Az EMS következetesen használva olyan elemeket tervezhet, amelyek automatikusan válaszolnak a betűméretre. Aztán egy ügyes trükk reagáló betűméret, akkor képes egy teljes oldalt, ami szabályozza a dinamikusan a nézetablak szélessége a böngészőt. Hadd mutassam meg, hogyan kell kihasználni az EMS "relatív" viselkedését, hogy méretezhető és érzékenyebbek legyenek.

Betűméretegységek

Az EMS-t betűméret használata lehet trükkös. A pontos értéket az elem örökölt betűmérete (azaz a szülőelem betűméretének) határozza meg. Ez bonyolultabbá válik, ha mélyebben elkezdi a fészkelő elemeket. Ha egy elem betűméretében EMS-ben van, szülője betűméretben van EMS-ben, és szülője még egy másik. Meg kell szednie ezeket az értékeket a gyermekelem tényleges számított értékének meghatározásához.

Ez azt jelenti, hogy ugyanazt a modult különböző tartályokban helyezheti el az EM jelentését. A modul kiszámíthatatlan lesz.

Ennek elkerülése érdekében tipikusan különböző relatív egységet használunk a betűmérethez: REMS. A REM (vagy "root em") nem az örökölt betűméreten alapul, hanem az oldal gyökérelem betűméretében, & lt; html & gt; . Ez azt jelenti, hogy értéke az egész oldalon ugyanaz. Ez sokkal kiszámíthatóbb, mint, és gyakran előnyös, hogy rendszeres EMS.

Modul építése EMS-vel

Használjunk relatív egységet egy modul létrehozásához. Azonban nem fogjuk követni a közös megközelítést. Ahelyett, hogy mindent használnánk mindent, csak egyszer használjuk: a modul legfelsőbb elemén. Ez létrehozza a modul ismert betűméretét, nem pedig az EM értékek fölötti kiszámíthatatlan láncán alapulva a DOM-ban. Ez azt jelenti, hogy könnyedén méretezhetjük a modul méretét egyetlen értéket.

Use rems on the outermost element to establish a known font size, then use ems to build based on that value — Használja a REMS-t a legkülső elemen, hogy létrehozzon egy ismert betűméretet, majd használja az EMS-t az adott érték alapján

Miután létrehoztuk ezt az ismert betűméretet, biztonságosan használhatjuk a rendszeres EMS-t a modul során. Használja csak az alelemek bármely betűméretét, de a legtöbb egyéb tulajdonságot is, beleértve párnázás , árrés és határ sugara .

Építünk egy panelet, amelynek címe és teste van. A jelölés így néz ki:

 & lt; div osztály = "panel" & gt;
  & lt; div osztály = "Panel-heading" & gt;
    & lt; h3 & gt; Ímé az EMS & lt; / h3 & gt teljesítménye;
  & lt; / div & gt;
  & lt; div osztály = "panel-test" & gt;
    Tekintsük meg a relatív relatív módon
    egységek a modulok dinamikus méretezéséhez.
  & lt; / div & gt;
& lt; / div & gt;

Stílusunk a külső tartályt. Megállapítjuk a betűméretet 1REM helyi EM értékünk létrehozása. Ezután meghatározzuk a határ sugara Az EMS használatával. Általában szeretném használni a PX-t a határhoz, de egy szép finom vonalat kapok.

 .panel {
  Betűméret: 1REM;
  Határ: 1px szilárd # 678;
  Border-sugara: 0,3em;
  túlcsordulás: rejtett;
}

Következő, stílus a belső elemek. Az EMS-t a paddinghez használjuk. Ezután növeljük a címsor betűméretét a helyi EM értékünk 1,25-szeresére, 20px számított méretű.

. Panel-tétel {
  Padding: 0.6em 1.2em;
  háttérszín: #cde;
  határ alsó: 1px szilárd # 678;
}
.panel-heading & gt; h3 {
  betűméret: 1.25em;
  Margó: 0;
  Levéltávolság: 0,03em;
}
.panel-test {
  Padding: 0.6em 1.2em;
}

A betűkészletek méretét a számított értékek (9,6px függőleges és 19,2px vízszintes) megítéléséhez többszörözheti. Igazán azonban nem számít. Próbáld meg, hogy ne lehessen lefelé a pixel-tökéletes mérésekkel. Ez kényelmetlenül érzi magát, de nyomja meg. Minél többet használsz EMS-t, annál többet fogsz ismerni őket egy egységként saját tiszteletben.

Dinamikusan skálázza a designot

Amikor ilyen újrafelhasználható modulokat hozunk létre, gyakran találunk néhány változatot. Mondja, hogy nagyobb verziót kívánunk létrehozni. Ha mindent használunk mindent, ez azt jelentené, hogy növeli a betűméretet, a párnázást, a határ-sugár és így tovább. Mivel azonban mindent meghatároztunk egy REM-alapú betűmérethez képest, csak az érték megváltoztatására van szükségünk, és a teljes modul válaszol:

. Panel - Nagy {Font-Méret: 1.2Rem; }

Egyszerűen hozzáadjuk ezt az osztályt egy panelhez, hogy nagyobb legyen: & lt; div osztály = "panel panel - nagy" & gt; . Ez megváltoztatja az EM helyi definícióját, és így a határ sugarát és a padding változást is, valamint a gyermekelemek betűméretét. Egyetlen nyilatkozattal, átméreteztük a modul minden részét.

A panel module, with paddings and border radius defined using ems — A panel modul, az EMS használatával meghatározott paddingokkal és határvonalral

Hasonlóképpen létrehozhatunk egy kis verziót:

. Panel - kicsi {betűméret: 0.8Rem; }

A modul földelésével a REMS felső szintű betűméret segítségével stabil és kiszámíthatóvá tette. Az EMS használatával kapcsolatos minden más meghatározásával az összes alkatrész alkatrészeit skálázhatjuk.

It is possible to base the size of everything inside the module on one value, then change that value to scale it all — Lehetőség van arra, hogy a modul belsejében lévő összes értéket egy értéken alapítsa, majd változtassa meg azt az értéket, hogy mindent megadjon

Ez egy erőteljes minta. Ezt a megközelítést bármit használhat az oldalán, a legördülő menüktől a szociális média gombokig. Földelje meg a modult egy REM értékkel, majd használja az EM-t gyakorlatilag minden másra a padlásokból, hogy helyezze el az ikonméreteket.

Hogy reagáljon

Toljuk tovább az elv egy szintet. A REMS és az EMS segítségével méreteztük a modult (és elméletileg minden más modulot). Ez végső soron azt jelenti, hogy méretük a gyökérelem betűméretén alapul. Ezután beállíthatjuk ezt az egyetlen értéket, hogy az egész oldalra válaszoljon.

Vegyünk egy másik relatív egységet: vh . Ez a készülék számított értéke a felhasználó képernyőméretéből származik; A nézetablak szélességének 1 százaléka. Ha a VH-ot használjuk a gyökér betűméret meghatározásához, akkor automatikusan reagál, a SANS Media lekérdezéseire. Állítsa be a gyökér betűméretét 2vw :

 HTML {
  betűméret: 2vw;
}

Sajnos a hatás kicsit túl erős. Például egy iPhone 6-on 5,5px-re számít, ami túl kicsi. Hasonlóképpen, ez indokolatlanul nagy a nagyobb képernyőkön. Hogy lágyítsa a hatást, használhatjuk a CSS-t Calc () funkció:

 HTML {
  Betűméret: Calc (0,6em + 1vw);
}

Most a betűméret részben stabil értékből származik, részben egy reagálóról. Ez sokkal jobb hatást eredményez. A 0,6em úgy viselkedik, mint egyfajta minimális betűméret. Most a root emailen kb. 13px-ről kb.

Az oldala skálázható modulokból áll, amelyek mindegyike a REM értékre vonatkozik, és a nézetablakkal is skáláznak. Az oldal háromszintű hierarchiával van kialakítva; Megváltoztathatja az egész oldal méretét, egy egyedi modulját vagy egyetlen elemét úgy, hogy egyszerű szerkesztést készíthet a betűmérethez. Bízz az EMS-nek és a REM-nek, és a böngésző gondoskodik az Ön számára.

Lehet, hogy még mindig hozzá kell adnia az alkalmi média lekérdezést a vonalcsomagolás vezérléséhez és más érzékeny aggályokhoz. De ez a kis kódot az EMS és a Rems használatának szokásaival együtt sok utat kap.

Ez a cikk eredetileg szerepelt net magazin 288. kiadás; Vásárolja meg itt

Kapcsolódó cikkek:

10 tipográfia trükkök Minden tervezőnek tudnia kell
A tipográfia és a betűtípusok tervezői útmutatója
Mester hozzáférhető web tipográfia

Tervezzen egy érzékeny helyet EM-alapú méretezéssel

Betűméretegységek

Modul építése EMS-vel

Dinamikusan skálázza a designot

Hogy reagáljon

kézikönyv - Most Popular Articles

A képek tömörítése: A webes tervezői útmutató

Hogyan készítsünk hozzáférhető webes űrlapokat

17 módja a jobb lények felhívására

Hogyan hozzunk létre egy PAN labirintus stílusú szörnyet

Hogyan ragadja meg a fényt olajokkal

Hogyan kell felhívni a táj pasztellel

Branding profik megosztják, hogyan kell köröm márka hangot

Festeni egy munch stílusú portré a Photoshop CC-ben

Kategóriák