Du kanske har kommit överens med att använda flexibla måttenheter, men du kanske inte helt förstår när du ska använda rem och när du ska använda em. Denna handledning hjälper dig att räkna ut det!

båda em och rem är flexibla, skalbara enheter som översätts av webbläsaren till pixelvärden, beroende på inställningarna för teckenstorlek i din design. Om du använder ett värde på 1em eller 1rem, kan det översättas i webbläsaren som allt från 16px till 160px eller något annat värde.

On the other hand px values are used by the webbläsare som det är, så1px visas alltid som exakt1px.

prova reglaget på det här CodePen-exemplet för att se hur värdet pårem ochem enheter kan översättas till olika pixelvärden, medan uttryckligen inställdapx enheter förblir fasta i storlek:

den stora frågan

användaem ochrem enheter ger oss flexibilitet i våra mönster och möjligheten att skala element upp och ner istället för att fastna med fasta storlekar. Vi kan använda denna flexibilitet för att göra våra mönster enklare att justera under utvecklingen, mer lyhörda och för att tillåta webbläsaranvändare att styra den totala omfattningen av webbplatser för maximal läsbarhet.

bådaem ochrem enheter ger denna flexibilitet och fungerar på liknande sätt, så den stora frågan är när ska vi användaem värden och när ska vi använda rem värden?

avgörande skillnad

skillnaden mellanem ochrem enheter är hur webbläsaren bestämmerpx värde de översätter till. Att förstå denna skillnad är nyckeln till att bestämma när man ska använda varje enhet.

vi ska börja med att gå över hurrem ochem enheter arbetar från grunden för att se till att du vet varje detalj. Sedan går vi vidare till varför du ska användaem ellerrem enheter.

slutligen tittar vi på den praktiska tillämpningen av exakt vilka element i en typisk design du ska använda varje typ av enhet på.

hur rem-enheter översätter till pixelvärden

När du använderrem enheter, pixelstorleken de översätter till beror på teckenstorleken på rotelementet på sidan, dvshtml – elementet. Den rotteckenstorleken multipliceras med vilket nummer du använder med din rem enhet.

till exempel, med en rotelement teckenstorlek på 16px10rem skulle motsvara 160px, dvs 10 x 16 = 160.

hur em-enheter översätter till pixelvärden

När du använder em enheter, pixelvärdet du slutar med är en multiplikation av teckenstorleken på elementet som stylas.

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 är en något utbredd missuppfattning attem enheter är relativt teckenstorleken för det överordnade elementet. I själva verket, enligt W3 spec, är de relativt teckenstorleken ”för det element som de används på”.

överordnade element teckenstorlekar kan påverkaem värden, men när det händer är det enbart på grund av arv. Låt oss ta en titt på varför och se hur detta fungerar i aktion.

effekten av arv på em-enheter

arbeta medem enheter kan börja bli knepiga när det gäller arv, eftersom varje element automatiskt ärver teckenstorleken på sin förälder. Effekten av arv kan endast åsidosättas genom att uttryckligen ange en teckenstorlek med en enhet som inte är föremål för arv, till exempel px eller vw.

teckenstorleken på det element somem enheter används bestämmer deras storlek. Men det elementet kan ha ärvt en teckenstorlek från sin förälder, som ärvt en teckenstorlek från sin förälder, och så vidare. Som sådan är det möjligt för ett em värde som ska utföras av teckenstorleken för någon av dess föräldrar.

låt oss titta på ett exempel. Prova gärna detta i CodePen själv när vi går igenom det. När du går med, använd Chrome Developer Tools eller Firebug för Firefox för att inspektera pixelvärdena våra em enheter beräknas till.

exempel på EM-arv

Om vi har en sida med en rotteckenstorlek på 16px (vanligtvis standard) och ett barndiv inuti det med vaddering av 1.5em, kommer den div att ärva teckenstorleken på 16px från rotelementet. Därför översätts dess stoppning till 24px, dvs 1,5 x 16 = 24.

vad händer om vi sätter in en annan div runt den första och ställer in dess font-size till 1.25em?

vår wrapper div ärver rotteckenstorleken på 16px och multiplicerar det med sin egen font-size inställning av 1.25em. Detta ställer in div för att ha en teckenstorlek på 20px, dvs 1,25 x 16 = 20.

nu ärver vår ursprungliga div inte längre direkt från rotelementet, utan ärver en teckenstorlek på 20px från sin nya överordnade div. Dess stoppningsvärde på 1.5emmotsvarar nu 30px, dvs 1,5 x 20 = 30.

denna skalningseffekt kan förvärras ytterligare om vi lägger till en em baserad teckenstorlek till vår ursprungliga div, låt oss säga 1.2em.

div ärver20px teckenstorlek från sin överordnade, multiplicerar sedan det med sin egen1.2em inställning, vilket ger den en ny teckenstorlek på24px, dvs 1.2 x 20 = 24.

1.5em stoppning på vår div kommer nu att ändras i storlek igen med den nya teckenstorleken, den här gången till 36px, dvs 1,5 x 24 = 36.

slutligen, för att ytterligare illustrera att em enheter är relativt teckenstorleken på det element de används på, (inte det överordnade elementet), låt oss se vad som händer med vår stoppning av 1.5em om vi uttryckligen ställer in div för att använda en teckenstorlek på 14px, ett värde som inte är föremål för arv.

nu har vår stoppning sjunkit ner till 21px, dvs 1,5 x 14 = 21. Det påverkas inte av teckenstorleken på det överordnade elementet.

med all denna potential för komplikationer kan du se varför det är viktigt att veta hur man använderem enheter på ett hanterbart sätt.

effekten av webbläsarinställningar på HTML-elementet teckenstorlek

som standard webbläsare har vanligtvis en teckenstorlek på 16px, men detta kan ändras till var som helst från 9px till 72px av användaren.

viktigt att veta:

rotenhtml elementet ärver sin teckenstorlek från inställningarna i webbläsaren, såvida inte åsidosätts med ett uttryckligen inställt fast värde.

Så medan teckenstorleken påhtml elementet är det som direkt bestämmerrem värden, kan den teckenstorleken först komma från webbläsarinställningarna.

sålunda kan inställningarna för webbläsarteckenstorlek påverka värdet på varje rem enhet som används i en design, liksom varje em enhet via arv.

Webbläsarinställningseffekt när ingen HTML-teckenstorlek är inställd

om inte åsidosatt,html elementet kommer det att ärva oavsett standardinställningen för teckenstorlek i webbläsaren. Låt oss till exempel ta en webbplats där ingen font-size egenskapen är inställd på html elementet.

om en användare har sin webbläsare med standard teckenstorlek på 16px kommer rotteckenstorleken att vara 16px. I Chrome Developer Tools kan du se vad ett element har ärvt genom att markera Visa ärvda egenskaper under fliken Beräknad.

i detta fall 10rem motsvarar 160px, dvs 10 x 16 = 160.

om användaren stöter på webbläsarens teckenstorlek upp till 18px blir rotteckenstorleken 18px. Nu10rem översätter till180px, dvs 10 x 18 = 180.

Webbläsarinställningseffekt med EM-enhet HTML-teckenstorlek

När en em baserad teckenstorlek är inställd på html element, pixelvärdet det översätter till kommer att vara en multipel av inställningen för webbläsarens teckenstorlek.

om webbplatsenshtml elementet hade enfont-size egenskap inställd på1.25em, skulle rotteckenstorleken vara 1,25 gånger inställningen för webbläsarens teckenstorlek.

om webbläsarens teckenstorlek var inställd på 16px, skulle rotteckenstorleken komma ut som 20px, dvs 1,25 x 16 = 20.

i detta fall 10rem skulle motsvara 200px, dvs 10 x 20 = 200.

men om webbläsarens teckenstorlek var inställd på 20px, skulle rotteckenstorleken istället översättas till 25px, dvs. 1,25 x 20 = 25.

Nu 10rem skulle motsvara 250px, dvs 10 x 25 = 250.

sammanfattar em vs. rem skillnad

vad alla ovanstående kokar ner till är detta:

• översättning av rem enheter till pixelvärde bestäms av teckenstorleken för html – elementet. Denna teckenstorlek påverkas av arv från inställningen för webbläsarens teckenstorlek om inte uttryckligen åsidosätts med en enhet som inte är föremål för arv.

• översättning av em enheter till pixelvärden bestäms av teckenstorleken på elementet de används på. Denna teckenstorlek påverkas av arv från överordnade element om inte uttryckligen åsidosätts med en enhet som inte är föremål för arv.

Varför använda rem-enheter:

den största kraften somrem enheter erbjuder är inte bara att de ger konsekvent dimensionering oavsett element arv. Snarare är det att de ger oss ett sätt att få inställningar för användarteckenstorlek att påverka varje enskild aspekt av en webbplats layout genom att använda rem enheter där vi brukade använda px enheter.

av denna anledning bör det primära syftet med att användarem enheter vara att säkerställa att oavsett standard teckenstorlek en användare har sin webbläsare inställd på, layouten kommer att justera för att rymma storleken på texten i den.

en webbplats kan utformas initialt med fokus på den vanligaste standardwebbläsarens teckenstorlek på 16px.

men genom att använda rem enheter, om en användare ökar deras teckenstorlek, layoutens integritet kommer att bevaras, och texten kommer inte att klämmas upp i ett styvt utrymme som är avsett för mindre text.

och om användaren minskar sin teckenstorlek skalar hela layouten ner och de kommer inte att lämnas med en liten smattering av text i en ödemark av vitt utrymme.

användare ändrar teckenstorlek inställningar för alla typer av skäl, från ansträngd syn att välja optimala inställningar för enheter som kan vara väldigt olika i storlek och visningsavstånd. Tillmötesgående dessa inställningar möjliggör mycket bättre användarupplevelser.

viktigt att veta:

vissa designers använderrem baserade layouter tillsammans med en fastpx enhetfont-size inställning påhtml elementet. Detta görs vanligtvis så att en ändring av teckenstorlek på html elementet kan skala övergripande designen upp eller ner.

Jag rekommenderar starkt detta eftersom det åsidosätter teckenstorlekenhtml elementet ärver från användarens webbläsarinställningar. Därför förhindrar detta att inställningarna har någon effekt och tar bort användarens förmåga att optimera för bästa visning.

Om du vill ändra teckenstorleken påhtml – elementet, gör det med ett emeller rem – värde eftersom rotteckenstorleken fortfarande kommer att vara en multipel av användarens inställning för teckenstorlek i webbläsaren.

detta gör att du fortfarande kan skala din design upp eller ner genom att ändra ditthtml elementets teckenstorlek, men du behåller effekten av användarwebbläsarinställningar.

Varför använda em-enheter

nyckelvärdet emenheter erbjuder är att de tillåter storleksvärden att bestämmas av en annan teckenstorlek än den förhtml – elementet.

av detta skäl bör det primära syftet medem enheter vara att möjliggöra skalbarhet inom ramen för ett specifikt designelement.

Du kan till exempel ställa in paddingmargin och line-height runt ett navigeringsmenyalternativ för att använda em värden.

om du ändrar menyens teckenstorlek ska avståndet runt menyalternativen skala proportionellt, oberoende av resten av menyn layout.

i det tidigare avsnittet om arv såg du hur snabbt hålla reda på em enheter kan komma ur handen. Av denna anledning rekommenderar jag bara att använda em enheter om du identifierar ett tydligt behov av dem.

praktisk tillämpning

det kan finnas en viss debatt bland webbdesigners och jag är säker på att olika människor har olika föredragna tillvägagångssätt, men min rekommendation är som följer.

använd em-enheter för:

alla storlekar som ska skala beroende på teckenstorleken för ett annat element än roten.

generellt sett är den enda anledningen till att du behöver använda em enheter att skala ett element som inte har standardteckenstorlek.

enligt vårt exempel ovan kan designkomponenter som menyalternativ, knappar och rubriker ha sina egna uttryckligen angivna teckenstorlekar. Om du ändrar dessa teckenstorlekar vill du att hela komponenten ska skala proportionellt.

gemensamma egenskaper denna riktlinje gäller för är marginpaddingwidthheight och line-height inställningar, när de används på element med icke standard teckenstorlek.

Jag rekommenderar att när du använderem enheter, bör teckenstorleken på elementet de används på ställas in irem enheter för att bevara skalbarhet men undvika arvsförvirring.

använder vanligtvis inteem enheter för teckenstorlekar

det är ganska vanligt att se emenheter som används för teckensnittsstorlek, särskilt i rubriker, men jag föreslår att mönster är mer hanterbara om rem enheter används vanligtvis för teckensnittsstorlek.

anledningen rubriker använder oftaem enheter är de är ett bättre val änpx enheter, som är relativt vanlig textstorlek. Menrem enheter kan uppnå detta mål lika bra. Om någon teckenstorlek justering påhtml elementet görs, kommer rubrikstorlekarna fortfarande skala för.

försök ändraem teckenstorlek påhtml elementet i denna Kodpen för att se själv:

oftare än inte vill vi inte att våra teckenstorlekar ska skala baserat på något annat element än roten, med bara några få undantag.

ett exempel där vi kanske villem baserad teckensnittsstorlek kan vara en rullgardinsmeny där vi har menyalternativ på andra nivån textstorlek beroende på teckenstorleken på den första nivån. Ett annat exempel kan vara en teckensnittsikon som används i en knapp, där ikonens storlek ska relatera till knappens textstorlek.

men de flesta element i en webbdesign tenderar att inte ha denna typ av krav, så du vill i allmänhet använda rem enheter för teckensnittsstorlek, med em enheter endast där det behövs specifikt.

använd rem-enheter för:

alla storlekar som inte behöverem enheter av de skäl som beskrivs ovan, och som ska skala beroende på inställningarna för webbläsarens teckenstorlek.

detta står för nästan allt i en standarddesign inklusive de flesta höjder, de flesta bredder, mest stoppning, de flesta marginaler, gränsbredder, de flesta teckenstorlekar, skuggor, i princip nästan alla delar av din layout.

i ett nötskal bör allt som kan göras skalbart med rem enheter vara.

tips

När du skapar layouter är det ofta lättare att tänka i pixlar men matas ut i rem enheter.

Du kan ha pixel tillrem beräkningar görs automatiskt via en förprocessor som Stylus / Sass / Less, eller en postprocessor som PostCSS med pxtorem plugin.

Alternativt kan du använda PXtoEM för att manuellt göra dina konverteringar.

Använd alltid rem mediefrågor

viktigt, när du använder rem enheter för att skapa en enhetligt skalbar design, bör dina mediefrågor också vara i rem enheter. Detta kommer att säkerställa att oavsett en användares webbläsare teckenstorlek, dina mediefrågor kommer att svara på det och justera din layout.

till exempel, om en användare skalar upp text mycket högt, kan din layout behöva snäppa ner från en två kolumner till en enda kolumn, precis som det kan på en mindre skärmad mobilenhet.

om dina brytpunkter har fasta pixelbredder kan endast en annan visningsstorlek utlösa dem. Men medrem – baserade brytpunkter svarar de också på olika teckensnittstorlekar.

använd inte em eller rem för:

Flerkolumnlayoutbredder

kolumnbredder i en layout bör vanligtvis vara% baserat så att de kan passa oförutsägbart stora visningsportar.

enstaka kolumner bör dock i allmänhet innehålla remvärden via enmax-width inställning.

till exempel:

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

detta håller kolumnen flexibel och skalbar, men förhindrar att den blir för bred för att texten däri ska vara bekvämt läsbar.

när ett Element bör vara strikt Unscalable

i en typisk webbdesign kommer det inte att finnas många delar av din layout som inte kan utformas för skalbarhet. Men ibland kommer du att stöta på element som verkligen behöver använda uttryckliga fasta värden för att förhindra skalning.

förutsättningen för att använda fasta storleksvärden bör vara att om elementet i fråga skalas skulle det bryta. Detta kommer verkligen inte upp ofta, så innan du frestas att piska ut de px enheter, fråga dig själv om du använder dem är en absolut nödvändighet.

Wrapping Up

Låt oss få en snabb punktöversikt av vad vi har täckt:

• rem ochem enheter beräknas till pixelvärden av webbläsaren, baserat på teckenstorlekar i din design.
• em enheter är baserade på teckenstorleken på det element de används på.
• rem enheter är baserade på teckenstorleken förhtml – elementet.
• em enheter kan påverkas av teckenstorlek arv från alla överordnade element

• rem enheter kan påverkas av teckenstorlek arv från webbläsaren teckensnittsinställningar.

• använd em enheter för dimensionering som ska skala beroende på teckenstorleken för ett annat element än roten.
• använd rem enheter för dimensionering som inte behöver em enheter, och som ska skala beroende på inställningarna för webbläsarens teckenstorlek.
• använd rem enheter om du inte är säker på att du behöver em enheter, inklusive på teckenstorlekar.
• använd rem enheter på mediefrågor
• använd inte em eller rem I flera kolumnlayoutbredder – använd % istället.
• använd inte em eller rem om skalning oundvikligen skulle leda till att ett layoutelement bryts.

Jag hoppas att du nu har byggt en robust och fullständig bild av exakt hurem ochrem enheter fungerar, och genom det vet du hur du bäst utnyttjar dem i dina mönster.

Jag uppmuntrar dig att prova användningsriktlinjerna i denna handledning för dig själv och njuta av den fullfjädrade skalbarheten och responsen hos de layouter som de gör att du kan skapa.