Suunnittele reagoiva sivusto em-pohjaisella mitoituksella

Olet todennäköisesti kuullut, että sinun tulisi käyttää suhteellisia yksiköitä fonttikokoon. Tämä on hyvä sääntö helppokäyttöiselle web-suunnittelulle; Jos käyttäjä muuttaa selaimen oletusfonttikokoa, sivusi tekstin kokoa voidaan muuttaa vastaavasti. Olet ehkä käyttänyt tätä neuvoa ja vaihtanut. Ehkä sait laskimesi ja muutit sivustosi kirjasinkokot absoluuttisista px yksikköä emiin tai todennäköisemmin remmiin.

paras kannettava tietokone 3D-studiolle max

Mutta jos pysäytit siellä, menetät paljon joustavuutta ja voimaa, joka tuo selaimeen. Em-yksikkö ei ole vain korvaava tuttu px ; voit käyttää sitä muihin ominaisuuksiin kuin vain Fonttikoko . Jos teet, jotkut sen muut edut alkavat näkyä.



Käyttämällä johdonmukaisesti em-tiedostoja, voit suunnitella sivulle komponentteja, jotka reagoivat automaattisesti fontin koon muuttuessa. Sitten älykkäällä temppulla reagoivaan kirjasinkokoon voit tuottaa kokonaisen sivun, joka säätyy dynaamisesti selaimen näkymän leveyden mukaan. Haluan näyttää sinulle, kuinka hyödyntää em-tiedostojen 'suhteellista' käyttäytymistä luomaan skaalautuvia ja reagoivia malleja.

Fontin koon yksiköt

Emien käyttäminen kirjasinkokoon voi olla hankalaa. Tarkka arvo määräytyy elementin perimän fonttikoon (eli ylätason fonttikoon) perusteella. Tämä monimutkaistuu, kun aloitat elementtien pesimisen syvemmälle. Jos elementillä on kirjasinkoko ems-tiedostossa, sen vanhemmalla on kirjasinkoko ems-tiedostossa, ja sen vanhemmalla on vielä toinen. Sinun on kerrottava kaikki nämä arvot määritettäessä alielementin todellinen laskettu arvo.

Tämä tarkoittaa, että saman moduulin sijoittaminen eri säiliöihin saattaa muuttaa em-merkitystä. Moduuli on arvaamaton.



Tämän välttämiseksi käytämme tyypillisesti eri suhteellista yksikköä kirjasinkokoon: rems. Rem (tai 'root em') ei perustu perityyn kirjasinkokoon, vaan sivun juurielementin kirjasinkokoon, . Tämä tarkoittaa, että sen arvo on sama koko sivulla. Se on ennustettavampi kuin säännölliset emit ja usein edullisemmat kuin ne.

Rakennetaan moduuli ems: llä

Käytetään suhteellisia yksiköitä moduulin rakentamiseen. Emme kuitenkaan noudata yhteistä lähestymistapaa. Remin käyttämisen sijasta käytämme sitä vain kerran: moduulin ylimmässä elementissä. Tämä määrittää moduulille tunnetun kirjasinkoon sen sijaan, että se perustuisi DOM: ssa sen yläpuolella olevaan arvaamattomaan em-arvoketjuun. Se tarkoittaa, että voimme helposti skaalata moduulin koon ohittamalla yhden arvon.

Käytä tunnettua kirjasinkokoa käyttämällä uloimman elementin remmejä ja rakenna sitten kyseisen arvon perusteella ems: llä



Käytä tunnettua kirjasinkokoa käyttämällä uloimman elementin remmejä ja rakenna sitten kyseisen arvon perusteella ems: llä

Kun olet määrittänyt tämän tunnetun kirjasinkoon, voimme käyttää säännöllisiä em-tiedostoja koko moduulissa. Käytä sitä paitsi alielementtien fonttikokoihin myös useimpiin muihin ominaisuuksiin, mukaan lukien pehmuste , marginaali ja raja-säde .

Rakennamme paneelin, jossa on otsikko ja runko. Merkintä näyttää tältä:

Behold the power of ems

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

Muotoillaan ulkosäiliö. Asetamme fonttikoon arvoksi 1rem paikallisen em-arvon määrittämiseksi. Määritämme sitten raja-säde käyttämällä ems. Haluan kuitenkin yleensä käyttää px: tä reunaan saadakseni hienon viivan.

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

Suunnittele seuraavaksi sisäosat. Käytämme ems täyte. Sitten kasvatamme otsikon kirjasinkoon 1,25-kertaiseksi paikalliselle em-arvollemme tuottaen 20 kuvapisteen lasketun koon.

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

Voit kertoa täyte-arvot niiden kirjasinkoolla määrittääksesi niiden lasketut arvot (9,6 kuvapistettä pystysuorassa ja 19,2 kuvapistettä vaakatasossa). Totuuden mukaan sillä ei ole väliä. Yritä olla juuttumatta pikselin täydellisiin mittauksiin. Tämä saattaa tuntua hankalalta, mutta jatka. Mitä enemmän käytät ems, sitä enemmän opit tuntemaan ne yhtenä yksikkönä heidän omassa suhteessaan.

Skaalaa muotoilua dynaamisesti

Kun luot tällaisia ​​uudelleenkäytettäviä moduuleja, huomaamme usein tarvitsevamme muutamia muunnelmia. Sano, että halusimme luoda suuremman version. Jos käytämme pikseliä kaikkeen, se tarkoittaisi kirjasimen koon, täytteen, reunan säteen ja niin edelleen kasvattamista. Koska olemme kuitenkin määrittäneet kaiken suhteessa yhteen rem-pohjaiseen kirjasinkokoon, meidän on vain muutettava tätä arvoa, ja koko moduuli reagoi:

kannettavan tietokoneen, jonka voit piirtää ruudulle
.panel--large { font-size: 1.2rem; }

Lisäämme vain tämän luokan paneeliin, jotta se olisi suurempi: . Tämä muuttaa em: n paikallista määritelmää ja siten myös reunan säde ja täyte muuttuvat yhdessä sen alielementtien kirjasinkoon kanssa. Yhdellä ilmoituksella olemme muuttaneet moduulin jokaisen osan kokoa.

Paneelimoduuli, jossa pehmusteet ja reunan säde määritetään käyttämällä ems

Paneelimoduuli, jossa pehmusteet ja reunan säde määritetään käyttämällä ems

Samoin voisimme luoda pienen version:

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

Maadoittamalla moduulin käyttämällä huipputason kirjasinkokoa remmeissä, olemme tehneet siitä vakaan ja ennustettavan. Määrittelemällä kaikki muu ems-sovelluksen sisällä olemme tehneet kaikki sen komponentit skaalattaviksi.

Moduulin sisällä olevan kaiken koko on mahdollista perustaa yhteen arvoon, sitten muuttaa arvoa skaalata se kaikki

Moduulin sisällä olevan kaiken koko on mahdollista perustaa yhteen arvoon, sitten muuttaa arvoa skaalata se kaikki

Tämä on voimakas malli. Voit käyttää tätä lähestymistapaa mihin tahansa sivullasi, pudotusvalikoista sosiaalisen median painikkeisiin. Maadoita moduuli rem-arvolla ja käytä sitten em-näppäintä melkein kaikkeen muuhun kuin pehmusteista paikannukseen kuvakokokoihin.

Tehdään siitä reagoiva

Työnnetään periaatetta yksi taso pidemmälle. Olemme koonneet moduulin (ja teoriassa kaikki muut moduulit sivulla) remmeillä ja emeillä. Tämä tarkoittaa viime kädessä sitä, että niiden koko perustuu juurielementin kirjasinkokoon. Sitten voimme säätää tätä yksittäistä arvoa, jotta koko sivu reagoi vuorotellen.

Otetaan mukaan toinen suhteellinen yksikkö: vh . Tämän yksikön laskettu arvo johdetaan käyttäjän näytön koosta; se on yhtä prosenttia näkymän leveydestä. Jos käytämme vh-yksikköä juurikirjasinkoon määrittelemiseen, se skaalautuu automaattisesti vastaavasti, ei mediakyselyjä. Aseta juuren kirjasinkoko arvoksi 2vw :

html { font-size: 2vw; }

Valitettavasti vaikutus on hieman liian voimakas. Esimerkiksi iPhone 6: ssa tämä laskee 5,5 kuvapistettä, mikä on liian pieni. Samoin se on kohtuuttoman suuri isommissa näytöissä. Tehon pehmentämiseksi voimme hyödyntää CSS: itä laskea () toiminto:

mikä väri sopii elämäsi matkalle
html { font-size: calc(0.6em + 1vw); }

Nyt kirjasinkoko on johdettu osittain vakaasta arvosta ja osittain reagoivasta arvosta. Tämä tuottaa paljon paremman vaikutuksen. 0,6em käyttäytyy eräänlaisena pienimpänä kirjasinkokona. Nyt root em skaalautuu sujuvasti noin 13 kuvapisteestä älypuhelimessa 21 kuvapisteeseen keskimääräisellä työpöydän näytöllä.

Kun sivusi koostuu skaalattavista moduuleista, joista kukin on maadoitettu rem-arvoon, ja myös ne skaalautuvat näkymän kanssa. Sivu on rakennettu kolmitasoisella hierarkialla; voit muuttaa koko sivun kokoa, yksittäistä moduulia tai yksittäistä elementtiä tekemällä yksinkertaisen muokkauksen kirjasinkokoon. Luota emmeihin ja remmeihin, ja selain huolehtii työstä puolestasi.

Saatat silti joutua lisäämään satunnaista mediakyselyä rivin rivityksen ja joidenkin muiden vastaavien ongelmien hallitsemiseksi. Mutta tämä pieni koodi yhdistettynä tapaan käyttää ems ja rems vievät sinut paljon tien sinne.

Tämä artikkeli oli alun perin esillä sivustossa nettilehti numero 288; osta se täältä

Aiheeseen liittyvät artikkelit: