olet ehkä hyväksynyt joustavien mittayksiköiden käytön, mutta et silti välttämättä täysin ymmärrä, milloin käyttää rem ja milloin käyttää em. Tämä opetusohjelma auttaa sinua selvittämään sen!

sekä em että rem ovat joustavia, skaalautuvia yksiköitä, jotka selain kääntää pikseliarvoiksi, riippuen kirjasinkokoasetuksista suunnittelussasi. Jos käytetään arvoa 1em tai 1rem, se voi kääntää selaimessa mitä tahansa 16px160px tai mitä tahansa muuta arvoa.

On the other hand px values are used by the selain sellaisenaan, joten 1px näyttää aina täsmälleen 1px.

kokeile liukusäädintä tästä CodePen-esimerkistä nähdäksesi, miten rem ja em yksiköt voivat muuttua erilaisiksi pikseliarvoiksi, kun taas eksplisiittisesti asetetaan px yksiköt pysyvät kiinteinä koossa:

suuri kysymys

käyttämällä em ja rem yksiköt antavat meille joustavuutta suunnitteluissamme ja mahdollisuuden skaalata elementtejä ylös ja alas sen sijaan, että olisimme juuttuneet kiinteisiin kokoihin. Voimme käyttää tätä joustavuutta tehdäksemme suunnitteluistamme helpompia säätää kehityksen aikana, reagoivampia ja salliaksemme selainkäyttäjien hallita sivustojen yleistä mittakaavaa maksimaalisen luettavuuden saavuttamiseksi.

sekä em että rem yksiköt tarjoavat tätä joustavuutta ja toimivat samalla tavalla, joten suuri kysymys on, milloin pitäisi käyttää em arvoja ja milloin pitäisi käyttää rem arvoja?

ratkaiseva ero

ero em ja rem yksiköiden välillä on se, miten selain määrittää px arvon, johon ne kääntävät. Ymmärtäminen tämä ero on avain määrittää, milloin käyttää kutakin yksikköä.

käymme aluksi läpi, miten rem ja em yksiköt toimivat maasta asti, jotta jokainen yksityiskohta tiedetään. Sitten siirrytään siihen, miksi em tai rem yksiköt.

lopuksi tarkastelemme käytännön soveltamista tarkalleen, mitkä elementit tyypillisen rakenteen sinun pitäisi käyttää kunkin yksikön.

miten rem-yksiköt muuttavat Pikseliarvoiksi

käytettäessä rem yksiköt, pikselin koko, johon ne käännetään, riippuu sivun juurielementin kirjasinkoosta eli html Elementti. Juurifontin koko kerrotaan millä tahansa numerolla rem yksikkö.

esimerkiksi juurielementin fonttikoko on 16px vastaisi 160px eli 10 x 16 = 160.

miten em-yksiköt muuntavat pikselin arvoiksi

käytettäessä em yksiköitä, pikselin arvo, johon päädyt, on kertolasku elementin kirjasinkoosta.

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

Important to Know:

on jokseenkin laajalle levinnyt harhaluulo, että em yksiköt ovat suhteessa kantaelementin kirjasinkokoon. Itse asiassa, kohti W3 spec, ne ovat suhteessa kirjasinkoon ”elementti, johon niitä käytetään”.

Emoelementin kirjasinkoot voivat vaikuttaa em arvoihin, mutta kun näin tapahtuu, se johtuu pelkästään periytymisestä. Katsotaanpa miksi, ja miten tämä toimii käytännössä.

periytymisen vaikutus em-yksiköihin

työskentely em yksiköt voivat alkaa käydä hankalaksi periytymisen suhteen, koska jokainen elementti perii automaattisesti vanhemman kirjasinkoon. Periytymisen vaikutus voidaan kumota vain asettamalla yksiselitteisesti fonttikoko sellaisella yksiköllä, joka ei ole perinnön alainen, kuten px tai vw.

sen elementin kirjasinkoko, jolla em yksiköitä käytetään, määrittää niiden koon. Mutta tämä elementti on saattanut periä kirjasinkoon vanhemmaltaan, joka peri kirjasinkoon vanhemmaltaan, ja niin edelleen. Sellaisenaan on mahdollista, että mikä tahansa em arvo toteutuu minkä tahansa sen vanhemman kirjasinkoolla.

katsotaanpa esimerkkiä. Voit vapaasti kokeilla tätä CodePen itse, kun astumme sen läpi. Kun jatkat, käytä Chrome Developer Tools tai Firebug for Firefox tarkastaa pikselin arvot meidän em yksiköt lasketaan.

esimerkki em-perinnöstä

Jos meillä on sivu, jonka juurifontin koko on 16px (yleensä oletus) ja sen sisällä lapsidiv, jonka pehmuste on 1.5em, että div perii juurielementistä 16px. Näin ollen sen pehmuste kääntyy muotoon 24px eli 1,5 x 16 = 24.

Mitä jos kääritään toinen div ensimmäisen ympärille ja asetetaan sen font-size1.25em?

wrapperidiv perii 16px ja kertoo sen omalla font-size asetuksella 1.25em. Tällöin div: n fonttikoko on 20px eli 1,25 x 16 = 20.

nyt alkuperäinen div ei enää periydy suoraan juurielementistä, vaan se perii kirjasinkoon 20px uudelta kantadiviltään. Sen pehmustearvo 1.5em vastaa nyt 30px eli 1,5 x 20 = 30.

tätä skaalausvaikutusta voi pahentaa entisestään, jos lisäämme em pohjaisen kirjasinkoon alkuperäiseen div: iin, sanotaan 1.2em.

div perii 20px kirjasinkoon vanhemmaltaan, kertoo sen sitten omalla 1.2em – asetuksellaan, jolloin sille annetaan uusi kirjasinkoko 24px, eli 1,2 x 20 = 24.

1.5em pehmusteet div: llämme muuttuvat nyt jälleen uuden kirjasinkoon myötä, tällä kertaa 36px, eli 1,5 x 24 = 36.

lopuksi, jotta voidaan vielä havainnollistaa, että em yksiköt ovat suhteellisia sen elementin kirjasinkoon, jolla niitä käytetään, (ei kantaelementti), katsotaan mitä tapahtuu pehmusteillemme 1.5em jos asetamme div käyttämään kirjasinkokoa 14px, arvo ei kuulu perintöön.

nyt pehmusteemme on pudonnut 21PX: ään eli 1,5 x 14 = 21. Emoelementin kirjasinkoko ei vaikuta siihen.

kaikesta tästä komplikaatiopotentiaalista näkee, miksi on tärkeää osata käyttää em yksiköitä hallittavalla tavalla.

selaimen asetusten vaikutus HTML-elementin kirjasinkokoon

oletuksena selaimilla on yleensä 16px kirjasinkoko, mutta käyttäjä voi muuttaa sen mihin tahansa 9PX: stä 72px: ään.

tärkeää tietää:

root html Elementti perii kirjasinkokonsa selaimen asetuksista, ellei sitä ohiteta eksplisiittisesti asetetulla kiinteällä arvolla.

joten vaikka html Elementti määrittää suoraan rem arvot, kyseinen fonttikoko on saattanut tulla ensin selaimen asetuksista.

näin selaimen fonttikokoasetuksilla voidaan vaikuttaa jokaisen rem suunnittelussa käytetyn yksikön arvo, samoin kuin jokaisen em yksikön arvo periytymisen kautta.

selaimen Asetusefekti kun HTML-kirjasinkokoa ei ole asetettu

, ellei sitä ohiteta,

elementti se perii riippumatta siitä, mikä selaimen oletuskirjasinkoasetus on. Otetaan esimerkiksi paikka, jossafont-sizeominaisuus on asetettuhtmlElementti.

Jos käyttäjän selaimen oletuskirjasinkoko on 16px, pääkirjasinkoko on 16px. Chromen Kehittäjätyökaluissa näet, mitä elementti on perinyt tarkistamalla Näytä perityt ominaisuudet lasketun välilehden alta.

tässä tapauksessa vastaa 160px eli 10 x 16 = 160.

Jos käyttäjä näppäilee selaimen kirjasinkoon jopa 18px, juurifontin koko muuttuu 18px: ksi. Nyt tarkoittaa 180px, eli 10 x 18 = 180.

selaimen Asetusefekti em-yksikön HTML-fonttikoolla

kun em pohjaisen fontin koko on asetettu html elementti, pikselin arvo, jolle se käännetään, on selaimen kirjasinkokoasetuksen monikerta.

esimerkiksi, jos sivuston html elementillä olisi font-size ominaisuus asetettuna 1.25em, juurifontin koko olisi 1,25 kertaa selaimen kirjasinkoon nähden.

Jos selaimen fonttikooksi asetettaisiin 16px, juurifontin koko tulisi esiin muodossa 20px, eli 1,25 x 16 = 20.

tässä tapauksessa vastaisi 200px eli 10 x 20 = 200.

kuitenkin, jos selaimen fonttikoko olisi asetettu 20px, juurifontin koko kääntyisi sen sijaan muotoon 25px, ts. 1, 25 x 20 = 25.

nyt vastaisi 250px eli 10 x 25 = 250.

Summarizing em vs. rem Difference

What all the above boils down to is this:

• Translation of rem yksiköt pikselin arvolle määräytyy html elementin kirjasinkoon mukaan. Tähän kirjasinkokoon vaikuttaa periytyminen selaimen kirjasinkokoasetuksesta, ellei sitä nimenomaisesti ohiteta yksiköllä, johon ei sovelleta perintöä.

Translation of emunits to pixel values määräytyy sen elementin kirjasinkoon mukaan, jolla niitä käytetään. Tähän kirjasinkokoon vaikuttaa emoelementtien periytyminen, ellei sitä nimenomaisesti ohiteta yksiköllä, johon ei sovelleta perintöä.

Miksi käyttää rem-yksiköitä:

suurin teho, jonka rem yksiköt tarjoavat, ei ole vain se, että ne antavat tasaisen mitoituksen alkuaineiden periytymisestä riippumatta. Pikemminkin kyse on siitä, että ne antavat meille tavan saada käyttäjän fonttikokoasetukset vaikuttamaan sivuston layoutin jokaiseen aspektiin käyttämällä rem yksiköitä, joissa meillä oli tapana käyttää px yksiköitä.

tästä syystä rem yksiköiden ensisijainen käyttötarkoitus on varmistaa, että riippumatta siitä, mihin oletuskirjasinkokoon käyttäjä on selaimensa asettanut, asettelu mukautuu siinä olevan tekstin koon mukaan.

sivusto voidaan suunnitella aluksi keskittyen selaimen yleisimpään oletuskirjasimen kokoon 16px.

mutta käyttämällä rem yksikköä, jos käyttäjä kasvaa niiden fonttikoko, asettelun eheys säilyy, eikä teksti litisty pienemmälle tekstille tarkoitettuun jäykkään tilaan.

ja jos käyttäjä pienentää fonttikokoaan, koko asettelu skaalautuu pienemmäksi, eikä heille jää pientä tekstiä valkoisen avaruuden autiomaa.

käyttäjät muuttavat fontin kokoasetuksia kaikenlaisista syistä, kireästä näöstä aina optimiasetusten valitsemiseen laitteille, jotka voivat olla kooltaan ja katseluetäisyydeltään hyvin erilaisia. Nämä asetukset mahdollistavat paljon paremmat käyttäjäkokemukset.

tärkeää tietää:

jotkut suunnittelijat käyttävät rem pohjautuvia asetteluja yhdessä kiinteän px yksikön font-size asetuksen html elementin kanssa. Tämä tehdään tyypillisesti niin, että html elementin kirjasinkoon muutos voi skaalata kokonaisuutta ylös-tai alaspäin.

suosittelen vahvasti tätä vastaan, koska se ohittaa kirjasinkoon html Elementti perii käyttäjän selaimen asetuksista. Näin ollen tämä estää asetuksia saamasta mitään vaikutusta, ja poistaa käyttäjän kyky optimoida parhaan katselun.

Jos haluat muuttaa kirjasinkokoa html elementti, tee se em tai rem arvo, koska juurifontin koko on silloin vielä käyttäjän selaimen kirjasinkoon asetetun moninkertainen.

Näin voit vielä skaalata suunnitteluasi ylös-tai alaspäin muuttamalla html elementin kirjasinkokoa, mutta säilytät käyttäjän selainasetusten vaikutuksen.

Miksi käyttää em-yksiköitä

avainarvo em yksiköt tarjoavat, että niiden avulla mitoitusarvot voidaan määrittää muun kirjasinkoon kuin html elementin mukaan.

tästä syystä em yksiköiden ensisijainen tarkoitus tulisi olla skaalautuvuus tietyn suunnitteluelementin puitteissa.

esimerkiksi paddingmargin ja line-height navigointivalikon ympärille voidaan käyttää em arvoja.

näin Jos muutat valikon fonttikokoa, valikkokohtien väli suurenee suhteellisesti riippumatta muusta asettelu.

aiemmassa perintöä käsittelevässä osiossa näit kuinka nopeasti pitää kirjaa em yksiköt voivat karata käsistä. Tästä syystä suosittelen käyttämään em yksiköitä vain, jos niille on selkeä tarve.

käytännön sovellutuksesta

web-suunnittelijoiden keskuudessa voi olla jonkin verran keskustelua ja olen varma, että eri ihmisillä on erilaisia mieluisia lähestymistapoja, mutta suositukseni on seuraava.

käytä em-yksiköitä:

mihin tahansa mitoitukseen, jonka tulisi skaalautua muun elementin kuin juuren kirjasinkoon mukaan.

yleisesti ottaen ainoa syy em yksiköt on skaalata elementti, jolla ei ole oletuskirjasimen mitoitusta.

kuten yllä olevassa esimerkissämme, suunnittelukomponenteilla, kuten valikkokohdilla, painikkeilla ja otsikoilla voi olla omat erikseen ilmoitetut kirjasinkoot. Jos muutat näitä kirjasinkokoja, haluat koko komponentin skaalautuvan oikeassa suhteessa.

yleisiä ominaisuuksia näitä suuntaviivoja sovelletaan are marginpaddingwidthheight ja line-height asetukset, kun käytetään elementtejä, joilla ei ole oletuskirjasimen mitoitusta.

suosittelen, että kun käytät em yksiköitä, niiden käyttämän elementin fonttikoko tulisi asettaa rem yksiköitä, jotta skaalautuvuus säilyisi, mutta perintöepäselvyydet vältettäisiin.

Älä yleensä käytä em yksiköitä Kirjasinkooille

on melko yleistä nähdä em yksiköitä, joita käytetään kirjasinten mitoitukseen, erityisesti otsakkeissa, kuitenkin ehdottaisin, että mallit ovat helpommin hallittavissa, jos rem yksiköitä käytetään tyypillisesti kirjasimien mitoitukseen.

syynimikkeissä käytetään usein em yksikköä on se parempi valinta kuin px yksikköä, suhteutettuna normaaliin tekstikokoon. rem yksiköt voivat kuitenkin saavuttaa tämän tavoitteen yhtä hyvin. Jos html elementtiin tehdään fonttikokoa koskevia muutoksia, myös otsikkokoot skaalautuvat edelleen.

yritä muuttaa em kirjasinkoko html elementti tässä koodissa nähdäksesi itse:

useimmiten emme halua kirjasinkokojemme skaalautuvan minkään muun elementin kuin juuren perusteella, vain muutamia poikkeuksia lukuun ottamatta.

yksi esimerkki, jossa haluamme em pohjaisen kirjasimen mitoitus voisi olla pudotusvalikko, jossa toisen tason valikkokohteen teksti on mitoitettu ensimmäisen tason kirjasinkoon mukaan. Toinen esimerkki voi olla painikkeen sisällä käytettävä fonttikuvake, jossa kuvakkeen koon pitäisi liittyä painikkeen tekstikokoon.

useimmilla web-rakenteen elementeillä ei kuitenkaan ole tällaista vaatimusta, joten yleensä haluat käyttää rem yksiköitä fontin mitoitukseen, em yksiköitä vain silloin, kun se on tarpeen.

käytä rem-yksiköitä:

mille tahansa mitoitukselle, joka ei tarvitse em yksiköitä yllä kuvatuista syistä, ja jonka pitäisi skaalautua selaimen kirjasinkokoasetuksista riippuen.

Tämä selittää lähes kaiken standardirakenteessa, mukaan lukien useimmat korkeudet, useimmat leveydet, useimmat pehmusteet, useimmat marginaalit, reunaleveydet, useimmat kirjasinkoot, varjot, periaatteessa lähes jokaisen osan ulkoasusta.

pähkinänkuoressa pitäisi olla kaikki, mikä voidaan tehdä skaalautuvaksi rem yksiköillä.

kärki

ulkoasuja luotaessa on usein helpompi ajatella pikseleinä, mutta tuloste rem yksikköinä.

pikseli rem laskelmat tehdään automaattisesti Esiprosessorin, kuten Stylus / Sass / Less, tai postprosessorin, kuten PostCSS pxtorem-liitännäisen kautta.

Vaihtoehtoisesti voit käyttää pxtoemia konversioiden tekemiseen manuaalisesti.

Käytä aina rem mediakyselyt

tärkeää, kun käytät rem yksiköitä luodaksesi tasaisen skaalautuvan rakenteen, myös mediakyselyiden tulisi olla rem yksiköitä. Näin varmistetaan, että riippumatta käyttäjän selaimen fonttikoosta mediakyselysi vastaavat siihen ja muokkaavat asetteluasi.

esimerkiksi, jos käyttäjä skaalaa tekstiä hyvin korkealle, asettelusi saattaa joutua napsahtamaan kahdesta sarakkeesta yhteen sarakkeeseen, aivan kuten pienemmän seulotun mobiililaitteen kohdalla.

Jos keskeytyspisteesi ovat kiinteän pikselin leveydellä, vain eri kuvaikkunan koko voi laukaista ne. Kuitenkin rem – pohjaisilla raja-arvoilla ne reagoivat myös erilaiseen kirjasimen mitoitukseen.

Älä käytä em-tai rem-valmistetta:

monen sarakkeen Layout-leveydet

sarakkeen leveydet asettelussa tulisi tyypillisesti olla % perustuvat, jotta ne sopivat sujuvasti arvaamattoman kokoisiin näkymiin.

yksittäisiin sarakkeisiin tulisi kuitenkin edelleen yleensä sisällyttää rem arvot max-width asetus.

esimerkiksi:

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

tämä pitää sarakkeen taipuisana ja skaalautuvana, mutta estää sitä tulemasta liian leveäksi, jotta siinä oleva teksti olisi helposti luettavissa.

kun elementin pitäisi olla täysin epäyhtenäinen

tyypillisessä verkkosuunnittelussa ei ole monia osia, joita ei voisi suunnitella skaalautuviksi. Kuitenkin joskus törmäät elementtejä, jotka todella tarvitse käyttää nimenomaisia kiinteitä arvoja varten estää skaalaus.

kiinteiden mitoitusarvojen käyttämisen edellytyksenä tulee olla, että jos kyseessä oleva elementti skaalataan, se rikkoutuu. Tätä ei todellakaan tule usein vastaan, joten ennen kuin tekee mieli vetää nuo px yksiköt esiin, kysy itseltäsi, onko niiden käyttäminen ehdoton välttämättömyys.

paketointi

kerrataan nopeasti, mitä olemme käsitelleet:

• rem ja em yksiköt lasketaan selaimella pikseliarvoiksi, jotka perustuvat suunnittelusi kirjasinkokoihin.
• em yksiköt perustuvat käytettävän elementin kirjasinkoon.
• rem yksiköt perustuvat html elementin kirjasinkokoon.
• em yksikköihin voi vaikuttaa kirjasinkoon periytymisellä mistä tahansa pääelementistä

• rem yksiköihin voi vaikuttaa kirjasinkoon periytymisellä selaimen kirjasinasetuksista.

• käytä em yksikköjä mitoitukseen, jonka tulisi skaalautua muun elementin kuin juuren kirjasinkoon mukaan.
• käytä rem yksiköitä mitoitukseen, joka ei tarvitse em yksiköitä, ja jonka pitäisi skaalautua selaimen kirjasinkokoasetuksista riippuen.
• käytä rem yksiköitä, ellet ole varma, että tarvitset em yksiköitä, myös kirjasinkoossa.
• käytä rem yksiköt mediakyselyissä
• Älä käytä em tai rem monen sarakkeen layout – leveydet-käytä % sen sijaan.
• Älä käytä em tai rem jos skaalaus väistämättä aiheuttaisi asetteluelementin rikkoutumisen.

toivottavasti olet nyt rakentanut vankan ja täydellisen kuvan siitä, miten em ja rem yksiköt toimivat, ja sitä kautta osaat parhaiten hyödyntää niitä suunnitteluissasi.

kehotan sinua kokeilemaan tämän opetusohjelman sisältämiä käyttöohjeita itse, ja nauttimaan niiden ulkoasujen täysimittaisesta skaalautuvuudesta ja reagointikyvystä, joiden avulla voit luoda.