PX vs REM vs EM | Vilken CSS-enhet ska du använda?
Låt oss vara ärliga för ett ögonblick – att lista ut hur man storleksbestämmer saker i CSS kan kännas som att lära sig ett helt annat språk. Du sätter dig ner för att styla en enkel webbsida, och plötsligt stirrar du på en alfabetsoppa av enheter.
”Ska det här stycket vara 16px? Eller 1rem? Vänta, vad är egentligen en em?”
Om du någonsin har kommit på dig själv med att gissa enheter slumpmässigt tills din layout äntligen ser rätt ut, så är du definitivt inte ensam. Det är i princip ett eldprov för varje frontend-utvecklare. Men när du väl förstår hur dessa tre enheter faktiskt fungerar bakom kulisserna, slutar CSS att kännas som mörk magi och börjar kännas som en förutsägbar verktygslåda.
Låt oss bryta ner px, em och rem utan den tunga jargongen, med hjälp av några verkliga analogier för att få allt att klicka.
Pixlar (px): Den envisa linjalen
Tänk på en pixel som en måttsydd kostym gjord av ett tyg som aldrig töjer sig. Om du säger åt en knapp att ha en bredd på 200px och en textstorlek på 16px, är det exakt vad du får. Slut på diskussionen. Det är en absolut enhet.
Pixlar bryr sig ärligt talat inte om du tittar på webbplatsen på en enorm 4K-skärm, en liten fem år gammal smartphone, eller om användaren har skruvat upp webbläsarens standardteckensnitt för att de glömt sina läsglasögon. En pixel är en pixel.
Det positiva: De är förutsägbara. Du vet exakt vad du kommer att få, vilket gör dem otroligt lätta att resonera kring när du bygger exakta layouter. Det negativa: De är usla för tillgänglighet. Om du hårdkodar dina teckenstorlekar i pixlar och en användare med nedsatt syn försöker skala upp webbläsarens standardteckenstorlek, vägrar din 16px-text envist att växa.
Ems (em): Viskleken
Om pixlar är stela, är em-enheter den exakta motsatsen. (Kul fakta: namnet kommer från ett traditionellt typografiskt mått som ursprungligen baserades på bredden på den versala bokstaven ”M”!). En em är en relativ enhet, vilket betyder att den baserar sin storlek på sin omgivning – specifikt dess direkta förälderelement.
Tänk på em-enheter som att leka viskleken, eller kanske som ryska dockor. Om en föräldra-container har en teckensnittsstorlek på 16px, och du ger ett barnelement en teckensnittsstorlek på 2em, kommer barnet att vara dubbelt så stort som föräldern (alltså 32px).
Låter bra, eller hur? Tills du nästlar dem.
Säg att du har en lista, inuti en lista, inuti en lista. Om du sätter alla li-taggar till 1.5em, är den första listan 1,5x normal storlek. Den nästlade listan är 1,5x den storleken. Den tredje listan är 1,5x den storleken. Plötsligt skriker din text åt användaren med massiva bokstäver som fyller hela skärmen. Detta är känt som ”compounding problem” (ackumulerande effekt), och det är anledningen till att många utvecklare flyr från em-enheter skrikande.
Eftersom matematiken kan bli märkligt komplicerad när du nästlar element, vill du verkligen inte räkna ut det här i huvudet. Gör dig själv en stor tjänst och bokmärk en pixel till em-omvandlare för att rädda ditt förstånd när saker blir knepiga.
Rems (rem): Att ställa klockan efter Greenwich Mean Time
rem-enheten uppfanns specifikt för att lösa den ackumulerande mardrömmen med em.
”Rem” står för Root Em. Istället för att titta på sitt omedelbara förälderelement för att lista ut hur stort det ska vara, tittar en rem hela vägen upp till toppen av webbsidan: ”roten” (<html>-elementet).
Tänk på rem-enheter som att ställa din klocka efter en global standard som Greenwich Mean Time. Det spelar ingen roll var i världen du befinner dig (eller var ditt element är nästlat djupt i HTML-trädet); alla refererar till exakt samma klocka.
Som standard ställer de flesta webbläsare in rotens teckenstorlek till 16px. Så, 1rem motsvarar 16px. 2rem motsvarar 32px. 0.5rem motsvarar 8px. Om du inte känner för att räkna i huvudet varje gång du behöver översätta en designfil till kod, använd bara en praktisk pixel till rem-omvandlare för att påskynda ditt arbetsflöde.
Den absoluta magin med rem: Om en användare går in i sina webbläsarinställningar och ändrar sin standardtextstorlek till 24px för att de behöver större text, skalas hela din webbplats automatiskt upp vackert och proportionellt. Varför? För att allt som är byggt med rem baseras på det rottalet!
Så, vilken ska du egentligen använda?
Här är hemligheten: du behöver inte välja bara en och överge de andra. De bästa utvecklarna använder alla tre, men de använder dem för mycket specifika uppgifter.
Här är exakt hur du bör närma dig det:
1. Använd rem som standard för nästan allt.
Teckenstorlekar, marginaler, padding, maxbredder – använd rem. Det gör din webbplats otroligt tillgänglig och säkerställer att allt skalas proportionellt om användaren justerar sina webbläsarinställningar. Det är den obestridda guldstandarden för modern webbdesign.
2. Använd px för saker som aldrig ska skalas.
Om du sätter en tunn 1px ram runt ett kort, vill du förmodligen inte att den ramen ska bli ett klumpigt, fult 3px-block bara för att användaren ökade sin teckenstorlek. Använd px för ramar, skuggor (box shadows) och ibland för exakt positionering i kluriga layouter.
3. Använd em för modulära komponenter.
Använd em när du vill att avståndet ska skalas specifikt med teckenstorleken för just det elementet. Tänk dig till exempel en knapp. Du vill att paddingen runt texten alltid ska se proportionell ut, oavsett om det är en gigantisk ”Köp nu”-knapp eller en liten ”Skicka”-knapp. Om du ställer in knappens padding i em, kan du bara ändra teckenstorleken på knappen, så kommer paddingen automatiskt att växa eller krympa för att matcha perfekt.