Tervezzen érzékeny webhelyet em-alapú méretezéssel

Valószínűleg hallottad már, hogy relatív egységeket kell használni a betűmérethez. Ez egy jó szabály az elérhető webes tervezéshez; ha a felhasználó megváltoztatja a böngésző alapértelmezett betűméretét, ez lehetővé teszi az oldal szövegének ennek megfelelő átméretezését. Lehet, hogy megfogadta ezt a tanácsot, és elvégezte a váltást. Talán kiszabadította a számológépet, és abszolút értékből átalakította webhelye betűméretét px egységek em-ekhez vagy, valószínűbb, rem-ekhez.

De ha itt állt meg, akkor elveszíti sok rugalmasságát és erejét, amelyet a böngésző hoz. Az em egység nem egyszerűen az ismerős helyettesítője px ; nemcsak a tulajdonságokhoz használhatja betűméret . Ha mégis megteszi, akkor megjelenik néhány egyéb előnye.

Az em-ek következetes használatával olyan elemeket tervezhet az oldalon, amelyek automatikusan reagálnak a betűméret változására. Ezután az érzékeny betűméret ügyes trükkjével egy teljes oldalt készíthet, amely dinamikusan igazodik a böngésző nézetablak-szélessége alapján. Hadd mutassam meg, hogyan lehet kihasználni az em-ek „relatív” viselkedését skálázható és érzékeny tervek létrehozásához.



Betűméret egységek

Az ems használata betűmérethez bonyolult lehet. A pontos értéket az elem öröklött betűmérete (vagyis a szülőelem betűmérete) határozza meg. Ez bonyolultabbá válik, ha elkezd mélyebben fészkelni az elemeket. Ha egy elemnek betűmérete van az ems-ben, akkor a szülő betűmérete az ems-ben van, a szülője pedig még egy. A gyermekelem tényleges kiszámított értékének meghatározásához ezeket az értékeket meg kell szoroznia.

Ez azt jelenti, hogy ugyanazt a modult különböző konténerekbe helyezve megváltozhat az em jelentése. A modul kiszámíthatatlan lesz.

Ennek elkerülése érdekében a betűmérethez általában egy másik relatív egységet használunk: rems. A rem (vagy 'root em') nem az öröklött betűméreten alapul, hanem az oldal gyökérelemének betűméretén, . Ez azt jelenti, hogy értéke az egész oldalon azonos. Kiszámíthatóbb, és gyakran előnyösebb, mint a szokásos ems.

Modul felépítése ems-sel

Használjunk relatív egységeket egy modul felépítéséhez. Azonban nem fogjuk követni a közös megközelítést. Ahelyett, hogy mindenhez remet használnánk, csak egyszer fogjuk használni: a modul legfelső elemén. Ez létrehoz egy ismert betűméretet a modul számára, ahelyett, hogy a DOM-ban felette kiszámíthatatlan em értékláncra épülne. Ez azt jelenti, hogy egyetlen modul felülbírálásával könnyen méretezhetjük a modul méretét.

Használjon remseket a legkülső elemen egy ismert betűméret megállapításához, majd használja az ems értéket az adott érték alapján

Használjon remseket a legkülső elemen egy ismert betűméret megállapításához, majd használja az ems értéket az adott érték alapján

Miután meghatároztuk ezt az ismert betűméretet, biztonságosan használhatjuk a rendszeres em-eket az egész modulban. Használja nemcsak az alelemek betűméreteihez, hanem a legtöbb egyéb tulajdonsághoz is, ideértve párnázás , árrés és határsugár .

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

Behold the power of ems

Consider the ways you can leverage relative units for dynamic sizing of your modules.

Stílusozzuk a külső tartályt. A betűméretet a következőre állítjuk be: 1rem hogy megállapítsuk helyi em értékünket. Ezután meghatározzuk a határsugár ems felhasználásával. Általában a px-t szeretem használni a szegélyhez, hogy szép finom vonalat kapjak.

.panel { font-size: 1rem; border: 1px solid #678; border-radius: 0.3em; overflow: hidden; }

Ezután formázza a belső elemeket. A párnázáshoz em-eket használunk. Ezután a fejléc betűméretét a helyi em érték 1,25-szeresére növeljük, 20 képpontos kiszámított méretet eredményezve.

.panel-heading { padding: 0.6em 1.2em; background-color: #cde; border-bottom: 1px solid #678; } .panel-heading > h3 { font-size: 1.25em; margin: 0; letter-spacing: 0.03em; } .panel-body { padding: 0.6em 1.2em; }

A kiszámított értékek (9,6 képpont függőleges és 19,2 képpont vízszintes) meghatározásához megszorozhatja a kitöltési értékeket betűméretükkel. Igazság szerint azonban nem számít. Képpontos mérésekkel próbáljon meg nem akadni. Lehet, hogy ez kínos, de nyomja tovább. Minél többet használja az em-eket, annál jobban meg fogja ismerni őket, mint egységet a maguk szempontjából.

Dinamikus méretezés a tervezésen

Ilyen újrafelhasználható modulok létrehozásakor gyakran kiderül, hogy szükségünk van néhány variációra. Tegyük fel, hogy egy nagyobb verziót akartunk létrehozni. Ha mindenhez px-t használnánk, ez a betűméret, a párnázás, a határsugár és így tovább növelését jelentené. Mivel azonban mindent meghatároztunk egy rem alapú betűmérettel kapcsolatban, csak ezt az értéket kell megváltoztatnunk, és a teljes modul válaszolni fog:

.panel--large { font-size: 1.2rem; }

Egyszerűen hozzáadjuk ezt az osztályt egy panelhez, hogy nagyobb legyen: . Ez megváltoztatja az em helyi definícióját, és ezáltal a szegély sugara és a párnázása is megváltozik, valamint az alárendelt elemek betűmérete. Egyetlen nyilatkozattal átméreteztük a modul minden részét.

Panel modul, párnázásokkal és szegélysugárral, az ems használatával

Panel modul, párnázásokkal és szegélysugárral, az ems használatával

Hasonlóképpen létrehozhatnánk egy kis verziót is:

.panel--small { font-size: 0.8rem; }

Azáltal, hogy a modult földbe helyeztük egy rems csúcsszintű betűmérettel, stabilá és kiszámíthatóvá tettük. Ha az ems használatával meghatároztunk minden mást, az összes alkatrészét méretezhetővé tettük.

Lehetőség van arra, hogy a modulon belül minden méretét egy értékre alapozzuk, majd ezt az értéket megváltoztatva skálázhatjuk az egészet

Lehetőség van arra, hogy a modulon belül minden méretét egy értékre alapozzuk, majd ezt az értéket megváltoztatva skálázhatjuk az egészet

Ez egy erős minta. Ezt a megközelítést bármire használhatja az oldalán, a legördülő menüktől kezdve a közösségi média gombokig. Földelje a modult rem értékkel, majd az em használatával gyakorlatilag minden másra, a párnázástól a pozicionáláson át az ikonméretekig.

Válaszképessé tétele

Tegyük tovább az elvet egy szinttel tovább. A modult (és elméletileg az összes többi modult az oldalon) rems és em segítségével méreteztük. 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 oldal sorra válaszoljon.

Vegyünk be egy másik relatív egységet: vh . Ennek az egységnek a kiszá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ékával egyenlő. Ha a vh egységet használjuk a gyökér betűméretének meghatározásához, akkor az automatikusan reagálni fog, a média lekérdezések nélkül. Állítsa a gyökér betűméretét 2vw :

html { font-size: 2vw; }

Sajnos a hatás kissé túl erős. Például egy iPhone 6-on ez 5,5 képpontos képpontra számít, ami túl kicsi. Hasonlóképpen, indokolatlanul nagy a nagyobb képernyőkön. A hatás enyhítésére felhasználhatjuk a CSS-eket calc () funkció:

html { font-size: calc(0.6em + 1vw); }

Most a betűméretet részben egy stabil, részben egy adaptív értékből származtatják. Ez sokkal jobb hatást eredményez. A 0,6em egyfajta minimális betűméretként viselkedik. Most a root em folyékonyan skálázódik az okostelefon körülbelül 13 képpontjáról 21 képpontra egy átlagos asztali képernyőn.

Az oldal skálázható modulokból áll, amelyek mindegyike a rem értékre van alapozva, és ők is méretezni fogják a nézetablakkal. Az oldal háromszintű hierarchiával van felépítve; megváltoztathatja a teljes oldal, egy modul vagy egy elem méretét a betűméret egyszerű szerkesztésével. Bízzon az emekben és a remekben, és a böngésző gondoskodik az ön munkájáról.

Előfordulhat, hogy még mindig hozzá kell adnia az alkalmi média lekérdezést a vonalvezetés és néhány egyéb reagáló kérdés kezeléséhez. De ez a kis kódkombináció, ems és rems használatának szokásával kombinálva, sok utat fog elérni.

Ezt a cikket eredetileg a net magazin 288. szám; vásárolja meg itt

Kapcsolódó cikkek: