Om du har tillbringat någon tid med att fixa med CSS har du säkert stirrat på en skiss och undrat: ”Bör jag använda pixlar här, eller ska jag göra det här till ett rem-värde?”
Om du arbetar med en full HD-skärmbredd – närmare bestämt 1920px – och vill omvandla det till rem har du kommit helt rätt. Vi ska gå igenom den exakta matematiken, förklara varför det fungerar med en supersnabb och enkel analogi, och få dig tillbaka till kodandet på nolltid.
Det snabba svaret: 1920px till rem
Låt oss gå rakt på sak. Förutsatt att din webbplats använder webbläsarens standardteckenstorlek på 16px är 1920px exakt 120rem.
Hur kom vi fram till det? Det är ett enkelt divisionstal:
1920 ÷ 16 = 120
Det är allt. Men om du vill förstå varför vi dividerar med 16, varför vi överhuvudtaget bryr oss om rem, eller hur du helt slipper göra den här matematiken, häng med mig en kort stund till.
(Proffstips: Om du är trött på att räkna ut dessa siffror i huvudet, bokmärk bara en smidig pixel till rem-omvandlare som gör det tunga arbetet åt dig).
Pixlar vs. Rems: ”Bakningsanalogin”
För att förstå varför webbutvecklare är så besatta av rem hjälper det att ta ett steg bort från datorn och gå in i köket.
Tänk på pixlar (px) som en hård bakform i metall. Om du har en bakform på 23 cm kommer den alltid att vara 23 cm. Det spelar ingen roll om du bakar en kaka för två personer eller tjugo personer; formen vägrar att ändra storlek. Inom webbdesign är en pixel en strikt, absolut enhet. Om du sätter en ruta till 1920px kommer den att förbli 1920px, även om användaren tittar på den på en liten smarttelefon eller har dålig syn och behöver zooma in på allt.
Rems, å andra sidan, är som ett flexibelt recept. Föreställ dig ett pannkaksrecept som kräver ”1 dl mjöl per person”. Om en person äter använder du 1 dl. Om fyra personer äter skalas det automatiskt upp till 4 dl.
I CSS står rem för ”root em”. Den tittar på roten (den grundläggande teckenstorlek som din användare har ställt in i sin webbläsare) och skalar allt proportionellt utifrån det.
Det magiska talet: 16
Som standard ställer nästan varje webbläsare in rottypens teckenstorlek till 16px.
Så när du säger till CSS att göra en container 1rem bred säger webbläsaren: ”Okej, grundstorleken är 16px. Låt oss göra den här containern 16px bred.”
Om du vill ha en full HD-omslutning (wrapper) som är 1920 pixlar bred frågar du dig bara: ”Hur många gånger går 16 i 1920?”
1920 ÷ 16 = 120
Du skriver max-width: 120rem; i din stilmall, och sedan är du redo att köra. Och om du någonsin behöver arbeta baklänges (som när du läser någon annans kod och undrar vad i hela friden 120rem är i vanliga skärmmått), kan du alltid använda en rem till pixel-omvandlare för att räkna ut det.
Varför borde du bry dig? (Tillgänglighetsperspektivet)
Du kanske tänker: ”Matematik är jobbigt. Varför skriver jag inte bara 1920px och nöjer mig med det?”
Det kan du absolut göra. Men att bygga med rem gör din webbplats otroligt anpassad för användare som behöver zooma in. Om en synskadad användare ändrar sin standardteckenstorlek i webbläsaren från 16px till 24px kommer en webbplats som är helt uppbyggd med px envisas med att behålla samma storlek, vilket ofta gör att text överlappar eller blir oläslig.
Om du byggde din webbplats med rem andas hela layouten och skalas upp perfekt i enlighet med användarens inställningar. Det är i princip magi, och det får dig att framstå som en utvecklare i toppklass som faktiskt bryr sig om tillgänglighet.
Din snabba CSS-fusklapp
Om du inte vill ta fram miniräknaren varje gång du skriver CSS hittar du här en snabb referensguide baserad på standardroten på 16px.
Formeln: Mål-pixelstorlek ÷ 16 = rem-värde
- 16px = 1rem (Baslinjen)
- 24px = 1.5rem
- 32px = 2rem (Bra för standardrubriker)
- 48px = 3rem
- 64px = 4rem
- 768px = 48rem (Vanlig brytpunkt för surfplatta)
- 1024px = 64rem (Vanlig brytpunkt för dator)
- 1440px = 90rem (Stor datorskärm)
- 1920px = 120rem (Full HD-skärm)
Nästa gång du står inför en design på 1920px behöver du bara komma ihåg det flexibla receptet. Dividera med 16, lägg till 120rem och fortsätt bygga fantastiska saker!