du kan ha kommet til enighet med å bruke fleksible måleenheter, men du kan fortsatt ikke fullt ut forstår når du skal brukerem og når du skal brukeem. Denne opplæringen vil hjelpe deg med å finne ut det!

Både em og rem er fleksible, skalerbare enheter som oversettes av nettleseren til pikselverdier, avhengig av skriftstørrelsesinnstillingene i designet ditt. Hvis du bruker en verdi av 1em eller 1rem, kan den oversette i nettleseren som alt fra 16pxtil160px eller en annen verdi.

On the other hand px values are used by the nettleser som er, så 1px vil alltid vises som nøyaktig 1px.

Prøv glidebryteren på Dette CodePen-eksemplet for å se hvordan verdien avrem ogem enheter kan oversette til forskjellige pikselverdier, mens eksplisitt sattpx enheter forblir faste i størrelse:

Det Store Spørsmålet

brukeem ogrem enheter gir oss fleksibilitet i våre design, og muligheten til å skalere elementer opp og ned, i stedet for å bli sittende fast med faste størrelser. Vi kan bruke denne fleksibiliteten til å gjøre våre design enklere å justere under utvikling, mer responsive, og for å tillate nettleserbrukere å kontrollere den generelle omfanget av nettsteder for maksimal lesbarhet.

bådeem ogrem enheter gir denne fleksibiliteten og fungerer på lignende måter, så det store spørsmålet er, når skal vi brukeem verdier og når skal vi bruke rem verdier?

Avgjørende Forskjell

forskjellen mellom em og rem enheter er hvordan nettleseren bestemmerpx verdien de oversetter til. Forstå denne forskjellen er nøkkelen til å bestemme når du skal bruke hver enhet.

Vi skal begynne med å gå over hvordanrem ogem enheter jobber fra grunnen av for å sikre at du vet alle detaljer. Så går vi videre til hvorfor du bør brukeem ellerrem enheter.

Til slutt ser Vi på den praktiske anvendelsen av nøyaktig hvilke elementer i en typisk design du bør bruke hver type enhet på.

hvordan rem-Enheter Oversetter Til Pikselverdier

når du bruker rem – enheter, er pikselstørrelsen de oversetter til, avhengig av skriftstørrelsen til rotelementet på siden, dvs.html – elementet . Den rotfontstørrelsen multipliseres med det nummeret du bruker med din rem enhet.

for eksempel, med en rot element skriftstørrelse på16px10rem ville likestille til 160px, dvs.10 x 16 = 160.

hvordan em-enheter oversetter til pikselverdier

når du bruker em enheter, er pikselverdien du ender med en multiplikasjon av skriftstørrelsen på elementet som blir stylet.

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

Important to Know:

det er en noe utbredt misforståelse at em enheter er i forhold til skriftstørrelsen til foreldreelementet. Faktisk, i Henhold Til W3-spesifikasjonen, er de i forhold til skriftstørrelsen «av elementet de brukes på».

Parent element skriftstørrelser kan påvirkeem verdier, men når det skjer er det utelukkende på grunn av arv. La oss ta en titt på hvorfor, og se hvordan dette fungerer i aksjon.

Effekten Av Arv på em Enheter

Arbeide med em enheter kan begynne å bli vanskelig når det gjelder arv, fordi hvert element automatisk arver skriftstørrelsen til sin overordnede. Effekten av arv kan bare overstyres ved å angi en skriftstørrelse med en enhet som ikke er gjenstand for arv, for eksempel px eller vw.

skriftstørrelsen på elementet somem enheter brukes bestemmer størrelsen. Men det elementet kan ha arvet en skriftstørrelse fra sin forelder, som arvet en skriftstørrelse fra sin forelder, og så videre. Som sådan er det mulig for noenem – verdi som skal utføres av skriftstørrelsen til noen av foreldrene.

La oss se på et eksempel. Føl deg fri til å prøve dette ut I CodePen for deg selv som vi går gjennom det. Når du går, bruk Chrome Utviklerverktøy eller Firebug For Firefox for å inspisere pikselverdiene våre em enheter beregnes i.

Eksempel på Em Arv

hvis vi har en side med en rot skriftstørrelse på 16px (vanligvis standard) og et barn div inni den med polstring av 1.5em, vil div arve skriftstørrelsen på 16px fra rotelementet. Derfor vil polstringen oversette til24px, dvs. 1,5 x 16 = 24.

så hva om vi pakker en annen div rundt den første og setter den font-sizetil1.25em?

vår wrapper div arver roten skriftstørrelsen på 16px og multipliserer det med sin egenfont-size innstilling av1.25em. Dette setter div til å ha en skriftstørrelse på20px, dvs. 1,25 x 16 = 20.

nå arver vår opprinnelige div ikke lenger direkte fra rotelementet, i stedet arver den en skriftstørrelse på 20px fra sin nye overordnede div. Dens polstringsverdi av 1.5em tilsvarer nå 30px, dvs. 1,5 x 20 = 30.

denne skaleringseffekten kan forsterkes ytterligere hvis vi legger til enem basert skriftstørrelse til vår opprinnelige div, la oss si 1.2em.

div arver20px skriftstørrelse fra sin overordnede, og multipliserer den med sin egen1.2em innstilling, noe som gir den en ny skriftstørrelse på24px, dvs.1,2 x 20 = 24.

1.5em padding på vår div vil nå endre seg i størrelse igjen med den nye skriftstørrelsen, denne gangen til 36px, dvs.1,5 x 24 = 36.

Til slutt, for å illustrere at em enheter er i forhold til skriftstørrelsen til elementet de brukes på, (ikke foreldreelementet), la oss se hva som skjer med vår polstring av 1.5em hvis vi eksplisitt setter div til å bruke en skriftstørrelse på 14px, en verdi ikke underlagt arv.

nå har vår polstring falt ned til 21px, dvs. 1,5 x 14 = 21. Det påvirkes ikke av skriftstørrelsen til det overordnede elementet.

Med alt dette potensialet for komplikasjon, kan du se hvorfor det er viktig å vite hvordan du bruker em enheter på en håndterbar måte.

Effekten Av Nettleserinnstillinger PÅ HTML-Elementets Skriftstørrelse

som standard nettlesere har vanligvis en skriftstørrelse på 16px, men dette kan endres til hvor som helst fra 9px til 72px av brukeren.

Viktig Å Vite:

roten html – elementet arver sin skriftstørrelse fra innstillingene i nettleseren, med mindre overstyres med en eksplisitt angitt fast verdi.

så mens skriftstørrelsen påhtml – elementet er det som direkte bestemmerrem – verdiene, kan den skriftstørrelsen først ha kommet fra nettleserinnstillingene.

dermed nettleser skriftstørrelse innstillinger kan påvirke verdien av hver rem enhet som brukes i et design, samt hver em enhet via arv.

Nettleserinnstillingseffekt Når INGEN HTML-Skriftstørrelse Er Angitt

Med Mindre overstyres, vilhtml – elementet arve hva standard skriftstørrelsesinnstilling i nettleseren er. La oss for eksempel ta et nettsted der ingen font-size – egenskapen er satt påhtml – elementet.

hvis en bruker har sin nettleser på standard skriftstørrelse på 16px, vil roten skriftstørrelse være 16px. I Chrome-Utviklerverktøy kan du se hva et element har arvet ved å sjekke Vis arvede egenskaper under Fanen Beregnet.

i dette tilfellet 10rem tilsvarer 160px, dvs.10 x 16 = 160.

hvis brukeren støter på nettleserens skriftstørrelse opp til 18px, blir rotfontstørrelsen 18px. Nå10rem oversetter til180px, dvs.10 x 18 = 180.

Nettleserinnstillingseffekt med EM-Enhet HTML-Skriftstørrelse

når en embasert skriftstørrelse er angitt påhtml element, pikselverdien den oversetter til, vil være et flertall av innstillingen for nettleserens skriftstørrelse.

for eksempel, hvis nettstedets html – element hadde en font-size – egenskap satt til 1.25em, vil rotfontstørrelsen være 1,25 ganger innstillingen for nettleserens skriftstørrelse.

hvis nettleserens skriftstørrelse ble satt til 16px, vil rotfontstørrelsen komme ut som20px, dvs. 1,25 x 16 = 20.

i dette tilfellet 10rem ville være lik 200px, dvs.10 x 20 = 200.

men hvis skriftstørrelsen i nettleseren ble satt til 20px, vil rotfontstørrelsen i stedet oversette til 25px, dvs. 1,25 x 20 = 25.

nå 10rem ville være lik 250px, dvs.10 x 25 = 250.

Oppsummering em vs. rem Forskjell

Hva alt ovenfor koker ned til er dette:

• Oversettelse av rem enheter til pikselverdi bestemmes av skriftstørrelsen til html – elementet. Denne skriftstørrelsen påvirkes av arv fra innstillingen for skriftstørrelse i nettleseren, med mindre det er uttrykkelig overstyrt med en enhet som ikke er underlagt arv.

• Oversettelse av em enheter til pikselverdier bestemmes av skriftstørrelsen til elementet de brukes på. Denne skriftstørrelsen er påvirket av arv fra overordnede elementer med mindre eksplisitt overstyres med en enhet som ikke er gjenstand for arv.

Hvorfor Bruke Rem-Enheter:

den største kraften som rem enheter tilbyr, er ikke bare at de gir konsekvent dimensjonering uavhengig av elementarv. Snarere er det at de gir oss en måte å få brukerens skriftstørrelsesinnstillinger til å påvirke hvert eneste aspekt av et nettsteds layout ved å bruke rem enheter der vi pleide å bruke px enheter.

av denne grunn bør hovedformålet med å bruke rem enheter være å sikre at uansett standard skriftstørrelse en bruker har nettleseren satt til, vil oppsettet justere for å imøtekomme størrelsen på teksten i den.

et nettsted kan utformes først med fokus på den vanligste standard nettleserens skriftstørrelse på 16px.

Men ved å bruke rem enheter, hvis en bruker øker deres skriftstørrelse, integriteten til oppsettet vil bli bevart, og teksten vil ikke bli knust opp i en stiv plass ment for mindre tekst.

og hvis brukeren reduserer skriftstørrelsen, skalerer hele oppsettet ned, og de vil ikke bli igjen med en liten smattering av tekst i en wasteland av hvitt rom.

Brukere endre skriftstørrelse innstillinger for alle slags grunner, fra anstrengt syn til å velge optimale innstillinger for enheter som kan være svært forskjellig i størrelse og visningsavstand. Imøtekommende disse innstillingene gir mye bedre brukeropplevelser.

Viktig Å Vite:

noen designere bruker rem basert oppsett i forbindelse med en fast px enhet font-size innstilling påhtml element. Dette gjøres vanligvis slik at en endring av skriftstørrelsen på html – elementet kan skalere hele designet opp eller ned.

jeg fraråder dette som det overstyrer skriftstørrelsenhtml element arver fra brukerens nettleserinnstillinger. Dermed hindrer dette innstillingene fra å ha noen effekt, og fjerner brukerens evne til å optimalisere for best visning.

Hvis du vil endre skriftstørrelsen påhtml – elementet, gjør du det med enem ellerrem – verdi, da rotfontstørrelsen fortsatt vil være et multiplum av brukerens innstilling for skriftstørrelse i nettleseren.

dette vil fortsatt tillate deg å skalere designet opp eller ned ved å endrehtml elementets skriftstørrelse, men du vil bevare effekten av brukerens nettleserinnstillinger.

Hvorfor bruke em-Enheter

nøkkelverdienem – enheter tilbyr, er at de tillater størrelsesverdier å bli bestemt av en annen skriftstørrelse enn den forhtml – elementet.

av denne grunn bør hovedformålet med em enheter være å tillate skalerbarhet innenfor rammen av et bestemt designelement.

du kan for eksempel angi paddingmargin ogline-height rundt et navigasjonsmenyelement for å brukeem verdier.

på denne måten hvis du endrer menyens skriftstørrelse, vil avstanden rundt menyelementene skaleres proporsjonalt, uavhengig av resten av menyen.layout.

i den tidligere delen om arv så du hvor raskt å holde styr på em enheter kan komme ut av hånden. Av denne grunn anbefaler jeg bare å bruke em enheter hvis du identifiserer et klart behov for dem.

Praktisk Anvendelse

det kan være litt debatt blant webdesignere, og jeg er sikker på at forskjellige mennesker har forskjellige foretrukne tilnærminger, men min anbefaling er som følger.

Bruk em-Enheter for:

alle størrelser som skal skaleres avhengig av skriftstørrelsen til et annet element enn roten.

generelt sett er den eneste grunnen til at du må brukeem enheter å skalere et element som ikke har standard skriftstørrelse.

i vårt eksempel ovenfor kan designkomponenter som menyelementer, knapper og overskrifter ha sine egne eksplisitt angitte skriftstørrelser. Hvis du endrer disse skriftstørrelsene, vil du at hele komponenten skal skaleres proporsjonalt.

Vanlige egenskaper denne retningslinjen vil gjelde for er marginpaddingwidthheight og line-height innstillinger, når de brukes på elementer med ikke standard skriftstørrelse.

jeg anbefaler at når du bruker em enheter, bør skriftstørrelsen på elementet de brukes på, settes i rem enheter for å bevare skalerbarhet, men unngå arveforvirring.

Bruker Vanligvis Ikke em Enheter for Skriftstørrelser

det er ganske vanlig å se em enheter som brukes til skriftstørrelse, spesielt i overskrifter, men jeg vil foreslå at designene er mer håndterbare hvis rem enheter brukes vanligvis til skrift størrelse.

grunnen overskrifter ofte brukerem enheter er de er et bedre valg enn px enheter, å være i forhold til vanlig tekststørrelse. Menrem enheter kan oppnå dette målet like bra. Hvis noen skriftstørrelsesjustering på html – elementet er laget, vil overskriftsstørrelsene fortsatt skaleres.

Prøv å endreem skriftstørrelse påhtml element i Denne CodePen å se selv:

Oftere enn ikke, vil vi ikke at skriftstørrelsene våre skal skaleres basert på noe annet element enn roten, med bare noen få unntak.

Et eksempel der vi kanskje vil em basert skriftstørrelse kan være en rullegardinmeny, der vi har tekststørrelse på andre nivå, avhengig av skriftstørrelsen på første nivå. Et annet eksempel kan være et skriftikon som brukes inne i en knapp, der ikonets størrelse skal forholde seg til knappens tekststørrelse.

men de fleste elementer i et webdesign vil ikke ha denne typen krav, så du vil vanligvis bruke rem enheter for skriftstørrelse, medem enheter bare der det er spesielt nødvendig.

Bruk rem-enheter for:

alle størrelser som ikke trenger em enheter av årsakene beskrevet ovenfor, og som skal skaleres avhengig av innstillingene for skriftstørrelse i nettleseren.

dette står for nesten alt i en standard design, inkludert de fleste høyder, de fleste bredder, mest polstring, de fleste marginer, kantbredder, de fleste skriftstørrelser, skygger, i utgangspunktet nesten alle deler av oppsettet ditt.

i et nøtteskall, alt som kan gjøres skalerbart med rem enheter, skal være.

Tips

når du lager oppsett, er det ofte lettere å tenke i piksler, men utdata irem enheter.

du kan ha pixel til rem beregninger gjort automatisk via en preprosessor som Stylus / Sass / Less, eller en postprosessor som PostCSS med pxtorem plugin.

Alternativt kan Du bruke PXtoEM til å gjøre konverteringene manuelt.

Bruk Alltid rem Mediespørringer

Viktig, når du bruker remenheter for å lage en jevnt skalerbar design, bør mediespørringene dine også være i rem enheter. Dette vil sikre at uansett en brukers nettleser skriftstørrelse, vil medieforespørsler svare på det og justere oppsettet.

hvis en bruker for eksempel skalerer opp tekst svært høyt, kan det hende at layouten må snappe ned fra to kolonner til en enkelt kolonne, akkurat som på en mindre skjermet mobilenhet.

hvis avbruddspunkter er på faste pikselbredder, kan bare en annen viewport størrelse utløse dem. Men med rem baserte stoppunkter vil de svare på forskjellige skriftstørrelser også.

Ikke Bruk em Eller rem For:

Multi Kolonne Layout Bredder

Kolonnebredder i en layout bør typisk være% basert slik at de kan passe flytende uforutsigbar størrelse viewports.

men enkle kolonner bør fortsatt generelt inkludere rem verdier via enmax-width innstilling.

For eksempel:

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

dette holder kolonnen fleksibel og skalerbar, men hindrer at den blir for bred til at teksten i den kan leses komfortabelt.

når Et Element Skal Være Strengt Unscalable

i et typisk webdesign, vil det ikke være mange deler av oppsettet ditt som ikke kan utformes for skalerbarhet. Men noen ganger vil du komme over elementer som virkelig trenger å bruke eksplisitte faste verdier for å forhindre skalering.

forutsetningen for å bruke faste størrelsesverdier bør være at hvis det aktuelle elementet ble skalert, ville det bryte. Dette kommer egentlig ikke opp ofte, så før du er fristet til å piske ut de px enheter, spør deg selv om å bruke dem er en absolutt nødvendighet.

Innpakning

La oss få en rask bullet point oppsummering av hva vi har dekket:

• rem og em enheter beregnes i pikselverdier av nettleseren, basert på skriftstørrelser i designet ditt.
• em enheter er basert på skriftstørrelsen til elementet de brukes på.
• rem – enheter er basert på skriftstørrelsen tilhtml – elementet.
• em enheter kan påvirkes av arv av skriftstørrelse fra ethvert overordnet element

• rem enheter kan påvirkes av arv av skriftstørrelse fra nettleserinnstillingene.

• Bruk em enheter for dimensjonering som skal skaleres avhengig av skriftstørrelsen til et annet element enn roten.
• Brukrem enheter for dimensjonering som ikke trengerem enheter, og som skal skaleres avhengig av innstillingene for skriftstørrelse i nettleseren.
• Brukrem enheter med mindre du er sikker på at du trenger em enheter, inkludert på skriftstørrelser.
• Bruk rem enheter på mediespørringer
• ikke bruk em ellerrem i layoutbredder med flere kolonner – bruk% i stedet.
• ikke bruk em eller rem hvis skalering uunngåelig vil føre til at et layoutelement brytes.

jeg håper du nå har bygget et robust og komplett bilde av nøyaktig hvordanem ogrem enheter fungerer, og gjennom det vet hvordan du best kan utnytte dem i designene dine.

jeg oppfordrer deg til å prøve bruksretningslinjene i denne opplæringen selv, og nyt den fullverdige skalerbarheten og responsen til layoutene de gjør det mulig for deg å lage.