Du er muligvis kommet til enighed med at bruge fleksible måleenheder, men du forstår stadig ikke fuldt ud, hvornår du skal brugerem og hvornår du skal brugeem. Denne tutorial hjælper dig med at finde ud af det!

beggeemogrem er fleksible, skalerbare enheder, der oversættes til billedværdier, afhængigt af skriftstørrelsesindstillingerne i dit design. Hvis du bruger en værdi af 1em eller 1rem, kan den oversætte i Bro.sereren som alt fra 16px til 160px eller enhver anden værdi.

On the other hand px values are used by the som det er, så 1px vises altid som nøjagtigt 1px.

prøv skyderen på dette CodePen-eksempel for at se, hvordan værdien af rem og em enheder kan oversættes til forskellige billedværdier, mens de eksplicit indstilles px enheder forbliver faste i størrelse:

det store spørgsmål

brug af em og rem enheder giver os fleksibilitet i vores design og evnen til at skalere elementer op og ned i stedet for at sidde fast med faste størrelser. Vi kan bruge denne fleksibilitet til at gøre vores design lettere at justere under udviklingen, mere lydhør og for at give brugerne mulighed for at kontrollere den samlede skala af sider for maksimal læsbarhed.

begge em og rem enheder giver denne fleksibilitet og arbejder på lignende måder, så det store spørgsmål er, Hvornår skal vi bruge em værdier og hvornår skal vi bruge rem værdier?

afgørende forskel

forskellen mellemem ogrem enheder er, hvordan bro.ser bestemmerpx værdi de oversætter til. At forstå denne forskel er nøglen til at bestemme, hvornår hver enhed skal bruges.

Vi begynder med at gå over, hvordanremogem enheder arbejder fra bunden for at sikre, at du kender alle detaljer. Så går vi videre til, hvorfor du skal bruge em eller rem enheder.

endelig vil vi se på den praktiske anvendelse af præcis hvilke elementer i et typisk design, du skal bruge hver type enhed på.

hvordan rem-enheder oversættes til Billedværdier

når du brugerremenheder, afhænger billedstørrelsen, de oversætter til, af skriftstørrelsen på sidens rodelement, dvs.html element. Denne rod skriftstørrelse ganges med det nummer, du bruger med din rem enhed.

for eksempel med et rodelement skriftstørrelse på 16px10remville svare til 160px, dvs.10 gange 16 = 160.

hvordan em-enheder oversættes til billedværdier

når du bruger em enheder, er den billedværdi, du ender med, en multiplikation af skriftstørrelsen på elementet bliver 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 noget udbredt misforståelse, at em enheder er i forhold til skriftstørrelsen på det overordnede element. Faktisk er de i henhold til V3-specifikationen i forhold til skriftstørrelsen “på det element, de bruges på”.

overordnede element skriftstørrelser kan påvirkeem værdier, men når det sker, er det udelukkende på grund af arv. Lad os se på hvorfor og se, hvordan dette fungerer i aktion.

effekten af arv på em-enheder

arbejde medem enheder kan begynde at blive vanskelige, når det kommer til arv, fordi hvert element automatisk arver skriftstørrelsen på dets forælder. Effekten af arv kan kun tilsidesættes ved eksplicit at indstille en skriftstørrelse med en enhed, der ikke er underlagt arv, såsom px eller vw.

skriftstørrelsen på det element, somem enheder anvendes bestemmer deres størrelse. Men dette element kan have arvet en skriftstørrelse fra sin forælder, som arvede en skriftstørrelse fra sin forælder osv. Som sådan er det muligt for enhver em værdi, der skal udføres af skriftstørrelsen på nogen af dens forældre.

lad os se på et eksempel. Du er velkommen til at prøve dette i CodePen for dig selv, når vi går igennem det. Når du går videre, skal du bruge Chrome Developer Tools eller Firebug til at inspicere billedværdierne vores em enheder beregnes i.

eksempel på EM arv

Hvis vi har en side med en rod skriftstørrelse på 16px (normalt standard) og et barn div inde i det med polstring af 1.5em, vil div arve skriftstørrelsen på 16px fra rodelementet. Derfor vil dens polstring oversætte til 24px, dvs.1,5 gange 16 = 24.

hvad nu hvis vi pakker en anden div rundt om den første og sætter dens font-size til 1.25em?

vores indpakning div arver rod skriftstørrelsen på 16px og multiplicerer det med sin egen font-size indstilling af 1.25em. Dette indstiller div ‘ en til at have en skriftstørrelse på 20px, dvs.1,25 gange 16 = 20.

nu arver vores originale div ikke længere direkte fra rodelementet, i stedet arver den en skriftstørrelse på 20px fra sin nye forælder div. Dens polstringsværdi af 1.5em svarer nu til 30px, dvs.1,5 gange 20 = 30.

denne skaleringseffekt kan forstærkes yderligere, hvis vi tilføjer en em baseret skriftstørrelse til vores originale div, lad os sige 1.2em.

div arver20px skriftstørrelse fra dens forælder, multiplicerer derefter det med sin egen1.2em indstilling, hvilket giver den en ny skriftstørrelse på24px, dvs.1,2 gange 20 = 24.

1.5em polstring på vores div vil nu ændre sig i størrelse igen med den nye skriftstørrelse, denne gang til36px, dvs.1,5 gange 24 = 36.

endelig for yderligere at illustrere, at em enheder er i forhold til skriftstørrelsen på det element, de bruges på, (ikke det overordnede element), lad os se, hvad der sker med vores polstring af 1.5em hvis vi eksplicit indstiller div til at bruge en skriftstørrelse på 14px, en værdi, der ikke underlagt arv.

nu er vores polstring faldet ned til 21 stk., dvs. 1,5 gange 14 = 21. Det påvirkes ikke af skriftstørrelsen på det overordnede element.

med alt dette potentiale for komplikation kan du se, hvorfor det er vigtigt at vide, hvordan man bruger em enheder på en håndterbar måde.

effekten af HTML-elementets skriftstørrelse

har som standard normalt en skriftstørrelse på 16 gange, men dette kan ændres til hvor som helst fra 9 gange til 72 gange af brugeren.

vigtigt at vide:

roothtml elementet arver sin skriftstørrelse fra indstillingerne i bro.ser, medmindre tilsidesættes med en eksplicit indstillet fast værdi.

så mens skriftstørrelsen på htmlelementet er det, der direkte bestemmer rem værdier, kan denne skriftstørrelse først komme fra bro.serindstillinger.indstillinger for skriftstørrelse kan påvirke værdien af hver remenhed, der bruges i et design, såvel som hver em enhed via arv.

når ingen HTML-skriftstørrelse er indstillet

medmindre tilsidesættes, html elementet det arver uanset standardindstillingen for skriftstørrelse i Bro.sereren er. Tage et sted, hvor ingenfont-size ejendom er indstillet påhtml element.

Hvis en bruger har en standardskriftstørrelse på 16%, vil rodskriftstørrelsen være 16%. I Chrome Developer Tools kan du se, hvad et element har arvet ved at kontrollere Vis nedarvede egenskaber under fanen beregnet.

i dette tilfælde 10rem svarer til 160px, dvs.10 gange 16 = 160.

Hvis brugeren støder deres skriftstørrelse op til 18 gange, bliver rod skriftstørrelsen 18 gange. Nu10rem oversætter til180px, dvs.10 gange 18 = 180.

bro.ser indstilling effekt med em enhed HTML skriftstørrelse

Når en em baseret skriftstørrelse er indstillet på html element, den billedværdi, den oversætter til, vil være et multiplum af skrifttypestørrelsesindstillingen.

for eksempel, hvis stedetshtml element havde enfont-size egenskab indstillet til1.25em, ville rod skriftstørrelsen være 1,25 gange indstillingen for skriftstørrelse.hvis skriftstørrelsen blev indstillet til 16px, ville rod skriftstørrelsen komme ud som 20px, dvs.1,25 gange 16 = 20.

i dette tilfælde 10rem ville være lig 200px, dvs.10 gange 20 = 200.

men hvis skriftstørrelsen blev indstillet til 20px, vil rod skriftstørrelsen i stedet oversætte til 25px, dvs. 1,25 gange 20 = 25.

nu 10rem ville være lig 250px, dvs.10 gange 25 = 250.

opsummering af em vs. rem forskel

hvad alle ovenstående koger ned til er dette:

• oversættelse afrem enheder til billedværdi bestemmes af skriftstørrelsen afhtml elementet. Denne skriftstørrelse påvirkes af nedarvning fra indstillingen for skriftstørrelse, medmindre den udtrykkeligt tilsidesættes med en enhed, der ikke er underlagt nedarvning.

• oversættelse afem enheder til billedværdier bestemmes af skriftstørrelsen på det element, de bruges på. Denne skriftstørrelse påvirkes af arv fra overordnede elementer, medmindre det udtrykkeligt tilsidesættes med en enhed, der ikke er underlagt arv.

Hvorfor bruge rem-enheder:

den største magt, somrem enheder tilbyder, er ikke kun, at de giver ensartet størrelse uanset elementarv. Det er snarere, at de giver os en måde at få brugerskriftstørrelsesindstillinger til at påvirke hvert enkelt aspekt af et steds layout ved at bruge rem enheder, hvor vi plejede at bruge px enheder.

af denne grund det primære formål med at brugerem enheder bør være at sikre, at uanset standard skriftstørrelse en bruger har deres bro.ser indstillet til, vil layoutet justere til at rumme størrelsen af tekst i det.

et sted kan oprindeligt designes med fokus på den mest almindelige standardskriftstørrelse på 16 stk.

men ved at bruge rem enheder, hvis en bruger ikke har nogen øger deres skriftstørrelse, integriteten af layoutet bevares, og teksten bliver ikke presset op i et stift rum beregnet til mindre tekst.

og hvis brugeren reducerer deres skriftstørrelse, skaleres hele layoutet ned, og de vil ikke blive efterladt med en lille smule tekst i en lille smule af tekst i en lille størrelse, og de vil ikke blive efterladt med en lille smule tekst i en ødemark af hvidt rum.

brugere ændrer skriftstørrelsesindstillinger af alle mulige årsager, fra anstrengt syn til valg af optimale indstillinger for enheder, der kan være meget forskellige i størrelse og visning afstand. At imødekomme disse indstillinger giver mulighed for meget bedre brugeroplevelser.

vigtigt at vide:

Nogle designere brugerrembaserede layouts i forbindelse med en fastpxenhedfont-sizeindstilling påhtml element. Dette gøres typisk, så en ændring af skriftstørrelse på html elementet kan skalere designet generelt op eller ned.

Jeg fraråder kraftigt dette, da det tilsidesætter skriftstørrelsenhtml elementet arver fra brugerens bro.serindstillinger. Derfor forhindrer dette indstillingerne fra at have nogen effekt, og fjerner brugerens evne til at optimere for bedste visning.

Hvis du vil ændre skriftstørrelsen påhtmlelementet, skal du gøre det med enemellerrem værdi som rod skriftstørrelse vil så stadig være et multiplum af brugerens skriftstørrelse indstilling.

Dette giver dig stadig mulighed for at skalere dit design op eller ned ved at ændre dinhtml elementets skriftstørrelse, men du bevarer effekten af brugerindstillinger.

Hvorfor bruge em-enheder

nøgleværdienemenhedstilbud er, at de tillader størrelsesværdier at blive bestemt af en anden skriftstørrelse endhtml element.

af denne grund skal det primære formål med em enheder være at give mulighed for skalerbarhed inden for rammerne af et specifikt designelement.

for eksempel kan du indstillepaddingmargin ogline-height omkring et navigationsmenupunkt for at brugeem værdier.

på denne måde, hvis du ændrer menuens skriftstørrelse, skaleres afstanden omkring menupunkterne proportionalt, uafhængigt af resten af layoutet.

i det tidligere afsnit om arv så du, hvor hurtigt du holdt styr på em enheder kan komme ud af hånden. Af denne grund anbefaler jeg kun at bruge em enheder, hvis du identificerer et klart behov for dem.

praktisk anvendelse

der kan være en vis debat blandt internetdesignere, og jeg er sikker på, at forskellige mennesker har forskellige foretrukne tilgange, men min anbefaling er som følger.

brug em-enheder til:

enhver størrelse, der skal skaleres afhængigt af skriftstørrelsen på et andet element end roden.

generelt er den eneste grund til at du skal brugeem enheder at skalere et element, der ikke har standard skriftstørrelse.

i henhold til vores eksempel ovenfor kan designkomponenter som menupunkter, knapper og overskrifter have deres egne eksplicit angivne skriftstørrelser. Hvis du ændrer disse skriftstørrelser, skal hele komponenten skaleres proportionalt.

almindelige egenskaber denne retningslinje gælder for er marginpaddingwidthheight og line-height indstillinger, når de bruges på elementer med ikke-standard skriftstørrelse.

Jeg anbefaler, at når du anvenderemenheder, skal skriftstørrelsen på det element, de bruges på, indstilles irem enheder for at bevare skalerbarheden, men undgå arveforvirring.

brug typisk ikke em enheder til skriftstørrelser

det er ret almindeligt at se em enheder, der bruges til skriftstørrelse, især i overskrifter, men jeg vil foreslå, at design er mere håndterbare, hvis rem enheder bruges typisk til skriftstørrelse.

årsagen til, at overskrifter ofte bruger em enheder er, at de er et bedre valg end px enheder, der er i forhold til almindelig tekststørrelse. rem enheder kan nå dette mål lige så godt. Hvis der foretages en skriftstørrelsesjustering på elementethtml, skaleres overskriftsstørrelserne stadig også.

prøv at ændreem skriftstørrelse påhtml elementet i denne CodePen for at se for dig selv:

oftere end ikke ønsker vi ikke, at vores skriftstørrelser skaleres baseret på noget andet element end roden, med kun få undtagelser.

et eksempel, hvor vi måske vilem baseret skriftstørrelse kan være en rullemenu, hvor vi har andet niveau menupunkt tekststørrelse afhængigt af skriftstørrelsen på det første niveau. Et andet eksempel kan være et skrifttypeikon, der bruges inde i en knap, hvor ikonets størrelse skal relateres til knappens tekststørrelse.

men de fleste elementer i et NetDesign har tendens til ikke at have denne type krav, så du vil generelt brugeremenheder til skriftstørrelse, medem enheder kun hvor det er specifikt nødvendigt.

brug rem-enheder til:

enhver størrelse, der ikke har brug forem enheder af de ovenfor beskrevne grunde, og det skal skaleres afhængigt af indstillingerne for skriftstørrelse.

dette tegner sig for næsten alt i et standarddesign inklusive de fleste højder, de fleste bredder, de fleste polstring, de fleste margener, kantbredder, de fleste skriftstørrelser, skygger, dybest set næsten alle dele af dit layout.

i en nøddeskal skal alt, hvad der kan gøres skalerbart medrem enheder, være.

Tip

når du opretter layout, er det ofte lettere at tænke i billedpunkter, men output irem enheder.

Du kan få pupel tilrem beregninger udført automatisk via en præprocessor som Stylus / Sass / Less eller en postprocessor som PostCSS med pktorem plugin.

Alternativt kan du bruge Pptoem til manuelt at foretage dine konverteringer.

Brug altidrem medieforespørgsler

vigtigt, når du brugerremenheder til at oprette et ensartet skalerbart design, skal dine medieforespørgsler også være irem enheder. Dette vil sikre, at uanset en brugers skriftstørrelse, vil dine medieforespørgsler svare på det og justere dit layout.

hvis en bruger f.eks. skalerer tekst meget højt op, skal dit layout muligvis klikke ned fra to kolonner til en enkelt kolonne, ligesom det kan være på en mindre screenet mobilenhed.

Hvis dine breakpoints har faste billedbredder, kan kun en anden visningsstørrelse udløse dem. Men med rem baserede breakpoints vil de også reagere på forskellige skriftstørrelser.

brug ikke em eller rem til:

multi kolonne Layout bredder

kolonnebredder i et layout skal typisk være% baseret, så de kan flydende passe uforudsigeligt størrelse visningsport.

men enkelte kolonner skal stadig generelt inkorporererem værdier via enmax-width indstilling.

for eksempel:

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

dette holder kolonnen fleksibel og skalerbar, men forhindrer den i at blive for bred til, at teksten deri kan læses komfortabelt.

når et Element skal være strengt Unscalable

i et typisk internetdesign, vil der ikke være mange dele af dit layout, der ikke kan designes til skalerbarhed. Men lejlighedsvis vil du støde på elementer, der virkelig skal bruge eksplicitte faste værdier med det formål at forhindre skalering.

forudsætningen for at anvende faste størrelsesværdier bør være, at hvis det pågældende element blev skaleret, ville det bryde. Dette kommer virkelig ikke op ofte, så før du er fristet til at piske dem px enheder, spørg dig selv, om det er en absolut nødvendighed at bruge dem.

indpakning

lad os få en hurtig oversigt over det, vi har dækket:

• remogem enheder beregnes i billedværdier af bro.ser, baseret på skriftstørrelser i dit design.
• em enheder er baseret på skriftstørrelsen på det element, de bruges på.
• rem enheder er baseret på skriftstørrelsen afhtml element.
• em enheder kan påvirkes af skriftstørrelsesarv fra ethvert overordnet element

• rem enheder kan påvirkes af skriftstørrelsesarv fra skrifttypeindstillinger.

• brugem enheder til dimensionering, der skal skaleres afhængigt af skriftstørrelsen på et andet element end roden.
• brugrem enheder til dimensionering, der ikke behøverem enheder, og det skal skaleres afhængigt af indstillingerne for skriftstørrelse.
• brug remenheder, medmindre du er sikker på at du har brug forem enheder, herunder på skriftstørrelser.
• brug rem enheder på medieforespørgsler
• brug ikke em eller rem i multi kolonne layout bredder – brug % i stedet.
• brug ikke emeller rem hvis skalering uundgåeligt ville få et layoutelement til at bryde.

Jeg håber, at du nu har bygget et robust og komplet billede af nøjagtigt, hvordanem ogrem enheder fungerer, og gennem det ved du, hvordan du bedst udnytter dem i dine designs.

Jeg opfordrer dig til at prøve brugsretningslinjerne i denne tutorial for dig selv og nyde den fuldt udbyggede skalerbarhed og lydhørhed af de layouts, de giver dig mulighed for at oprette.