Att använda ‘rem’ i din CSS

Som utvecklare vet du förmodligen hur viktigt det är att definiera storlekar i din projekts CSS. Även om pixlar (px) är den enklaste enheten att använda, överskrider de användarens preferens och kan orsaka problem med tillgänglighet. Det är där "rem" kommer in som en relativ enhet som sätts av HTML-rootelementets fontstorlek.

Att arbeta med en bas på 16 (det initiala rotvärdet för fontstorlek) kan dock vara irriterande jämfört med att använda pixlar t.ex. 18px motsvaras av 1.123rem. Därför vill jag dela med mig av två sätt att förenkla användningen av "rem" i din CSS:

Metod 1: Användning av CSS-variabler

/* Ange CSS-variabler för vanliga storlekar /

:root {–-12px: 0.75rem;

–-16px = 1rem;

-–30px = 1.875rem;}

/* Använd CSS-variabler för fontstorlek */

h1 {font-size: var(--30px);}

p {font-size: var(--12px);}

I detta exempel används CSS-variabler för att sätta fontstorleken för "h1" och "p". Värdena för variablerna sätts i rot-elementet och kan enkelt ändras för hela projektet. Vilket gör att du endast behöver göra beräkning av förhållandet mellan px och rem en gång.

Metod 2: Användning av "62,5%"

/* Ange rot fontstorlek till 62,5% */

:root {font-size: 62.5%;}

/* Använd rem för fontstorlek /

h1 {font-size: 2.4rem; / motsvarar 24px */}

p {font-size: 1.6rem; /* motsvarar 16px */}

I detta exempel är roten för fontstorlek satt till 62,5%, vilket gör att 1rem motsvarar 10px. Så att sätta fontstorleken för "h1" till 2,4rem motsvarar 24px (2,4 x 10px), och att sätta fontstorleken för "p" till 1,6rem motsvarar 16px (1,6 x 10px).

Båda dessa metoder är enligt min åsikt mer lämpliga sätt att arbeta med storlekar i dina projekt än att använda pixlar. Det man ska tänka på om man väljer variant nummer två är att om användaren i sin webbläsare ändrar root storleken kommer storleken räknas på 62,5% av det nya värdet, med det sagt är min rekommendation att använda variabelmetoden om du har möjlighet att välja fritt. Denna metod är även att föredra vad det gäller läsbarhet av koden när projektet blir äldre.