Varför du verkligen behöver sluta använda pixlar för webbdesign (och byta till Rem)
Låt oss vara ärliga ett ögonblick – webbdesign brukade vara löjligt enkelt. Förr i tiden stirrade alla på exakt likadana klumpiga stationära bildskärmar. Man kunde bara slänga på en teckensnittsstorlek på 16px på ett stycke, ställa in en fast bredd på sin huvudcontainer och vara nöjd med dagen.
Men tiderna har förändrats. Mycket. Nu försöker vi få webbplatser att se bra ut på telefoner i fickformat, gigantiska ultrawide-skärmar, surfplattor och till och med smarta kylskåp. Webben är inte längre en statisk affisch; det är en flytande, levande sak. Och om du fortfarande förlitar dig enbart på pixlar (px) för att bygga den? Då försöker du i princip sätta en tvångströja på vatten.
Det är dags att prata om relativa enheter. Ärligt talat är det en av de bästa vanorna du kan skaffa dig att skrota px till förmån för rem. Det räddar ditt förstånd, gör din kod renare och, viktigast av allt, det är mycket bättre för dina användare.
Problemet med pixlar (även kallat betongmetoden)
För att se varför rem är så bra måste vi först titta på varför pixlar är ganska kassa för modern webbdesign.
Tänk på pixlar som att gjuta betong. När den väl har stelnat sitter du fast med den. Om du säger till en webbläsare att en rubrik är 24px, kommer den att förbli 24px – oavsett vad. Pixlar är i princip CSS-världens kontrollbehov. De bryr sig inte om användaren kisar mot skärmen, och de bryr sig absolut inte om någon specifikt gick in i sina webbläsarinställningar för att höja standardstorleken på teckensnittet för att de har dålig syn.
Pixeln står på sig. Den säger: ”Nej, designern sa 24 pixlar, så du får exakt 24 pixlar.”
Denna stelhet är en mardröm för tillgänglighet. När vi tvingar på folk absoluta storlekar tar vi bort deras förmåga att kontrollera hur de konsumerar vårt innehåll.
Välkommen REM: Din smarta termostat för CSS
Om pixlar är gjuten betong, är rem som en smart termostat för hela ditt hus.
Rem står för ”Root Em”. Jag ska inte tråka ut dig med den tekniska historiken, men allt du egentligen behöver veta är att en rem-enhet baserar sin storlek helt på roten av ditt dokument (taggen <html>). Som standard ställer nästan alla webbläsare in sin rotstorlek för teckensnitt till 16px.
Så om du ställer in din brödtext till 1rem, översätter webbläsaren det till 16px. Om du ställer in din rubrik till 2rem, räknar webbläsaren bara ut: 2 x 16 = 32px.
Den verkliga magin med skalning
Här blir analogin med den smarta termostaten faktiskt logisk.
Säg att en användare besöker din sida, men hen har dålig syn. Hen har gått in i sina webbläsarinställningar och ändrat sin standardstorlek för teckensnitt från standard 16px till något större, som 24px.
- Om du byggde din webbplats med pixlar: Din kod ignorerar dem helt. Din 16px text förblir exakt 16px. Användaren måste zooma in på ett klumpigt sätt, vilket förstör din noggrant utformade layout och tvingar dem att scrolla horisontellt bara för att läsa en enda mening. Det är otroligt frustrerande.
- Om du byggde din webbplats med Rems: Din webbplats respekterar faktiskt användaren. Eftersom din text är inställd på
1rem, tittar webbläsaren på deras nya standardinställning (24px) och säger: ”Okej, 1rem motsvarar nu 24px.” Allt på din webbplats – teckensnitt, utfyllnad, marginaler – skalas upp perfekt och proportionellt.
Du behövde inte skriva en enda extra rad CSS. Layouten anpassade sig helt enkelt efter vad användaren behövde.
Varför du behöver byta, helst redan igår
Att gå från px till rem är inte bara en trendig fluga bland utvecklare. Det är en grundläggande förändring i hur vi hanterar användarupplevelsen.
- Det är en stor vinst för tillgänglighet (A11y): Webben ska fungera för alla. Genom att använda rems ser du till att synskadade användare som förlitar sig på anpassade webbläsarinställningar faktiskt kan läsa ditt innehåll utan att behöva kämpa mot din CSS.
- Responsiv design blir mycket enklare: Vill du skala ner hela webbplatsens typografi för mobilen? Om du använde pixlar skulle du vara tvungen att skriva dussintals media queries för att ändra varenda teckensnittsstorlek. Med rems ändrar du bara rotens teckensnittsstorlek en gång, så skalas allt annat ner automatiskt. Det känns ärligt talat som att fuska.
- Framtidssäkring: Nya enheter med konstiga skärmstorlekar lanseras hela tiden. Relativa enheter ser till att din design är flexibel och kan andas istället för att gå sönder under press.
Lathund: ”När ska man använda vad?”
Du behöver inte kasta pixlar i papperskorgen helt och hållet. De har fortfarande en liten plats i modern design. Här är en snabb och enkel guide för att göra övergången:
Använd rem för:
- Teckensnittsstorlekar (Rubriker, stycken, knappar)
- Avstånd (Marginaler och padding)
- Bredder och höjder på större layout-containrar
Använd px för:
- Små, exakta detaljer som aldrig någonsin ska skalas upp. Tänk 1px ramar runt ett kort eller en subtil box-shadow.
Den gyllene matematiken:
- 1rem = 16px (Webbläsarens standard)
- 1.5rem = 24px
- 2rem = 32px
(Proffstips: Om du hatar att räkna i huvudet, bokmärk bara ett verktyg för konvertering från Px till Rem och låt det göra grovjobbet åt dig!)
Att anamma rem innebär att ge upp en liten bit av absolut kontroll för att istället bygga en betydligt bättre, flexiblare och mer tillgänglig upplevelse för de människor som faktiskt använder din webbplats. Betongen spricker ändå – det är dags att börja bygga saker som flyter.