Kujundage tundlik sait em-põhise suurusega

Ilmselt olete kuulnud, et peaksite fondi suuruse jaoks kasutama suhtelisi ühikuid. See on hea reegel juurdepääsetava veebidisaini jaoks; kui kasutaja muudab oma brauseri vaikefondi suurust, võimaldab see teie lehe teksti vastavalt suurust muuta. Võib-olla olete seda nõuannet kasutanud ja lülitunud. Võib-olla saite oma kalkulaatori välja ja teisendasite saidi fondisuurused absoluutselt px ühikud emsideks või tõenäolisemalt remsideks.

Kuid kui te seal peatusite, jätate kasutamata palju paindlikkust ja jõudu, mis brauserile pakub. Em-seade pole lihtsalt tuttava asendaja px ; saate seda kasutada rohkemate omaduste jaoks kui lihtsalt fondi suurus . Kui te seda teete, hakkavad ilmnema mõned selle muud eelised.

Järjepidevat emide kasutamist saate lehel kujundada komponente, mis reageerivad fondi suuruse muutumisel automaatselt. Seejärel saate nutika trikkiga reageeriva fondisuuruse jaoks luua terve lehe, mis kohandub dünaamiliselt vastavalt brauseri vaateava laiusele. Lubage mul näidata teile, kuidas kasutada emide suhtelist käitumist skaleeritavate ja reageerivate kujunduste loomiseks.

Fondi suuruse ühikud

Emside kasutamine fondi suuruse jaoks võib olla keeruline. Täpse väärtuse määrab elemendi päritud fondisuurus (s.o emaelemendi fondisuurus). See muutub keerulisemaks, kui hakkate elemente sügavamalt pesitsema. Kui elemendi fondi suurus on emides, on selle vanemal fondi suurus emides ja vanemal on veel üks. Alamelemendi tegeliku arvutatud väärtuse määramiseks peate kõik need väärtused korrutama.

See tähendab, et sama mooduli paigutamine erinevatesse konteineritesse võib muuta em-i tähendust. Moodul on ettearvamatu.

Selle vältimiseks kasutame fondi suuruse jaoks tavaliselt erinevat suhtelist ühikut: rems. Rem (või 'root em') ei põhine päritud fondi suurusel, vaid lehe juurelemendi fondi suurusel, . See tähendab, et selle väärtus on kogu lehel sama. See on tavalistest emidest prognoositavam ja sageli eelistatavam.

EM-idega mooduli ehitamine

Kasutame mooduli ehitamiseks suhtelisi ühikuid. Kuid me ei hakka järgima ühist lähenemisviisi. Selle asemel, et kasutada rem kõike, kasutame seda ainult üks kord: mooduli kõige ülemisel elemendil. See loob mooduli teadaoleva fondisuuruse, selle asemel, et see põhineks DOM-is selle kohal oleval ettearvamatul em-väärtuste ahelal. See tähendab, et me saame mooduli suurust hõlpsalt skaleerida, ületades ühe väärtuse.

Teadaoleva fondisuuruse määramiseks kasutage äärmise elemendi remme, seejärel kasutage selle väärtuse põhjal ehitamiseks ems-i

Teadaoleva fondisuuruse määramiseks kasutage äärmise elemendi remme, seejärel kasutage selle väärtuse põhjal ehitamiseks ems-i

Pärast selle teadaoleva fondisuuruse kindlakstegemist on kogu moodulis turvaline kasutada tavalisi emme. Kasutage seda mitte ainult alamelementide fondisuuruste jaoks, vaid ka enamiku muude omaduste jaoks, sealhulgas polsterdus , marginaal ja piiri raadius .

Ehitame pealkirja ja kerega paneeli. Hinnalisand näeb välja selline:

Behold the power of ems

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

Kujundame välise anuma. Määrame fondi suuruseks 1rem meie kohaliku em väärtuse kindlakstegemiseks. Seejärel määratleme piiri raadius emide kasutamine. Mulle meeldib tavaliselt kasutada px-d äärise jaoks, et saada kena peenjoont.

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

Järgmisena sisesta sisemised elemendid. Kasutame polsterdamiseks em-sid. Seejärel suurendame pealkirja fondi suurust 1,25-kordseks kohalikust em-väärtusest, saades 20px arvutatud suuruse.

.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; }

Arvutatud väärtuste (9,6pikslit vertikaalseks ja 19,2pikslist horisontaalseks) määramiseks võite polstriväärtused korrutada fondi suurusega. Tõsi küll, see pole oluline. Pikslitäiuslike mõõtmistega proovige mitte kinni jääda. See võib tunduda ebamugav, kuid vajutage edasi. Mida rohkem emme kasutate, seda rohkem saate tuttavaks nendega kui üksusega nende endi suhtes.

Disaini dünaamiline skaleerimine

Selliste korduvkasutatavate moodulite loomisel leiame, et vajame sageli mõnda variatsiooni. Oletame, et tahtsime luua suurema versiooni. Kui kasutaksime kõigeks px-d, tähendaks see fondi suuruse, polsterduse, piiri raadiuse ja nii edasi suurendamist. Kuna oleme aga kõik määranud ühe rem-põhise fondisuuruse suhtes, peame seda väärtust ainult muutma ja kogu moodul vastab:

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

Selle klassi suurendamiseks lisame selle klassi lihtsalt paneelile: . See muudab em-i kohalikku määratlust ja seeläbi muutuvad ka piiri raadius ja polsterdus koos alamelementide fondisuurusega. Ühe deklaratsiooniga muutsime mooduli iga osa suurust.

Paneelmoodul, mille emside abil on määratletud polsterdused ja äärise raadius

Paneelmoodul, mille emside abil on määratletud polsterdused ja äärise raadius

Samamoodi võiksime luua väikese versiooni:

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

Maandades mooduli remdides tipptasemel fondisuurusega, oleme selle muutnud stabiilseks ja prognoositavaks. Määratledes emide abil kõik muu, oleme kõik selle komponendid skaleeritavad.

Mooduli sisemuse suuruse on võimalik rajada ühele väärtusele, seejärel muuta seda väärtust, et seda kõike skaleerida

Mooduli sisemuse suuruse on võimalik rajada ühele väärtusele, seejärel muuta seda väärtust, et seda kõike skaleerida

See on võimas muster. Seda lähenemist saate kasutada mis tahes lehel, alates rippmenüüdest kuni sotsiaalmeedia nuppudeni. Maandage moodul rem-väärtusega, seejärel kasutage em peaaegu kogu muu jaoks alates paddingutest kuni positsioneerimiseni kuni ikoonide suurusteni.

Muutmine reageerivaks

Lükkame põhimõtte ühe taseme võrra edasi. Oleme mooduli (ja teoreetiliselt kõigi muude lehel olevate moodulite) suuruse määranud remside ja emide abil. Lõppkokkuvõttes tähendab see, et nende suurus põhineb juurelemendi fondi suurusel. Seejärel saame seda ühte väärtust reguleerida, et kogu leht vastaks kordamööda.

Toome veel ühe suhtelise üksuse: vh . Selle üksuse arvutatud väärtus tuletatakse kasutaja ekraani suurusest; see võrdub 1 protsendiga vaateava laiusest. Kui kasutame juurfondi suuruse määratlemiseks vh-üksust, siis skaleeritakse see automaatselt reageerivalt, ilma meediapäringuteta. Määrake juurfondi suuruseks väärtus 2vw :

html { font-size: 2vw; }

Kahjuks on efekt natuke liiga tugev. Näiteks iPhone 6 puhul arvutatakse see 5,5 piksliseks, mis on liiga väike. Samamoodi on see suurematel ekraanidel ebamõistlikult suur. Efekti pehmendamiseks saame kasutada CSS-e arvutama () funktsioon:

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

Nüüd tuletatakse fondi suurus osaliselt stabiilsest ja osaliselt tundlikust väärtusest. See annab palju parema efekti. The 0,6em käitub mingi minimaalse fondisuurusena. Nüüd laieneb juuremeedium nutitelefoni sujuvalt umbes 13px-st 21px-ni keskmise töölaua ekraanil.

Kui teie leht koosneb skaleeritavatest moodulitest, millest igaüks on maandatud rem-väärtuseni, ja ka need suurendavad vaateava. Leht on üles ehitatud kolmetasandilise hierarhiaga; fondi suuruse lihtsa muutmise abil saate muuta kogu lehe, üksiku mooduli või üksiku elemendi suurust. Usaldage emme ja remme ning brauser hoolitseb teie eest töö eest.

Võimalik, et peate ikkagi lisama juhusliku meediumipäringu, et juhtida rea ​​mähkimist ja muid reageerivaid probleeme. Kuid see väike koodipisik kombineeritult emide ja remside kasutamisega viib teid sinna palju.

See artikkel ilmus algselt saidil netiajakiri väljaanne 288; osta siit

Seotud artiklid: