Grunderna i REM-enheter inom CSS
CSS, eller Cascading Style Sheets, är en grundläggande teknologi för att skapa användargränssnitt i webb-, mobil- och datorapplikationer. Genom att använda olika värden och egenskaper i CSS kan man enkelt anpassa utseendet och funktionen hos en applikation. Ett värde som ofta dyker upp är REM, som är särskilt användbart för att hantera textstorlek.
Denna artikel syftar till att utforska REM-enheter inom CSS, belysa betydelsen av responsiv typografi i webbdesign, förklara hur REM-enheter beräknas samt visa på fördelarna med att använda REM.
Vad betyder REM i CSS?
REM, som står för Root-EM, är en enhet som anger ett elements textstorlek i relation till textstorleken på rotelementet. Det är alltså en relativ enhet, vilket betyder att alla värden som använder REM ändras i takt med att textstorleken för rotelementet justeras. I de flesta webbläsare är standardtextstorleken 16 pixlar, vilket gör att 1 REM motsvarar 16 pixlar när rotelementet är 16 pixlar.
REM-enheter kontrasterar mot absoluta enheter, som pixlar. Till exempel, om du sätter bredden på ett element till 200 pixlar kommer det att förbli 200 pixlar oavsett skärmstorlek eller andra faktorer.
Nedan följer ett exempel på hur detta kan se ut med en div-tagg och tillhörande CSS:
Exempel på HTML:
<div>Hej världen</div>
Exempel på CSS:
div {
border: 1.5px solid black;
width: 200px;
}
Oavsett skärmstorlek eller förändringar i miljön kommer bredden på div-elementet att förbli oförändrad.
Responsiv typografis betydelse
Responsiv typografi handlar om textens layout, storlek och avstånd. Här följer några anledningar till att det är viktigt:
- Förbättrad användarupplevelse: Användare föredrar applikationer som är lätta att navigera. Genom att anpassa sig till olika skärmstorlekar och miljöer erbjuds en behaglig och smidig upplevelse.
- Anpassning till olika visningsportar: Responsiv typografi justerar sig efter det tillgängliga utrymmet, vilket förhindrar översträckt text på stora skärmar och för liten text på små skärmar.
- Förbättrad läsbarhet: En bra webbplats ska vara lätt att läsa. Responsiv typografi ser till att texten anpassas efter skärmstorlek och orientering.
- Konsekvent varumärke: Med växande kodbaser är det lätt att få variationer i typsnitt. Responsiv design säkerställer att designen är konsekvent oavsett skärmstorlek eller användarbeteende.
- Integration med media queries: Responsiv typografi fungerar bra tillsammans med media queries. Det gör det möjligt att skapa olika stilar baserat på skärmorientering och storlek.
- Förbättrad tillgänglighet: Användare med olika behov kan justera skärmstorlekar och teckensnitt för att passa sina behov.
Hur beräknas REM-enheter?
REM-enheter beräknas i relation till textstorleken på <html>-elementet (rotelementet). Det gör det möjligt att skapa enhetliga och skalbara designer genom att utgå från ett enda rotvärde.
De flesta webbläsare har en standardstorlek på 16 pixlar, men det går att ställa in textstorleken på rotelementet till ett annat värde, till exempel 10 pixlar. Då blir 10 pixlar lika med 1 REM.
Här följer ett exempel på CSS-kod som sätter textstorleken i HTML till 10px:
html {
font-size: 10px;
}
Nedan följer ett exempel på hur detta kan se ut med en h1-tagg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Välkommen till adminvista.com</h1>
</body>
</html>
Om ingen styling tillämpas, har texten i H1-elementet en standardstorlek på 16px. Detta innebär att 1 REM = 16px. Resultatet i webbläsaren blir därmed:
Genom att länka till en CSS-fil, till exempel styles.css, kan vi demonstrera hur REM fungerar:
<link rel="stylesheet" href="https://wilku.top/the-path-to-elegant-responsive-text/styles.css">
Nu kan vi ändra textstorleken i rotelementet, till exempel till 10px:
html {
font-size: 10px;
}
I detta fall kommer alla REM-värden att relateras till 10 pixlar. Därmed krymper texten i H1-elementet i webbläsaren:
Vi kan justera textstorleken i H1-elementet genom att använda REM-värden:
h1 {
font-size: 3.5rem; /* Motsvarar 35 pixlar (3.5rem * 10px = 35px) */
}
Nu blir texten i H1-elementet större, motsvarande 35px eller 3.5 REM:
Fördelar med att använda REM
Många är vana vid att använda pixlar (px) och procent vid CSS-kodning. Men det finns flera anledningar att välja REM:
- Skalbarhet: Genom att ändra rotelementets textstorlek kan du enkelt justera alla REM-enheter proportionellt. Det innebär att du även kan tillgodose användarnas egna anpassningar i webbläsaren.
- Enkel hantering: Genom att ändra rotelementet justeras alla REM-enheter automatiskt, vilket sparar tid och ansträngning.
- Konsekvent storlek: REM-enheter styr textstorlekar och avstånd, vilket ger konsekventa textstorlekar på dina webbsidor.
- Responsiv design: REM-enheter kan enkelt kombineras med media queries, vilket ger möjlighet att justera textstorlekar baserat på skärmstorlek och andra faktorer.
REM kontra EM kontra Procent
Förutom REM finns det även andra enheter som pixlar, EM och procent. Alla dessa enheter används för att definiera textstorlek och avstånd, men de fungerar olika. Låt oss titta på skillnaderna mellan REM, EM och procent.
REM kontra EM
Både REM och EM är relativa enheter som förändras utifrån ett givet värde. Men REM relaterar till rotelementet (<html>), medan EM relaterar till det närmaste föräldraelementet. Om ett element är en förälder och innehåller ett underordnat element, kommer EM-värdet i underordnade element att påverkas av ändringar i föräldraelementet. Här följer ett exempel på HTML-kod:
<div class="parent">
<p>Detta är föräldraelementet.</p>
<div class="child">
<p>Detta är barnelementet.</p>
</div>
</div>
Och här följer ett exempel på hur man kan tillämpa CSS:
.parent {
font-size: 1.5em;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
}
.child {
font-size: 1.2em;
color: #333;
}
I detta exempel har .parent en textstorlek på 1.5em, medan .child har 1.2em. Alla förändringar i .parent kommer att ärvas av .child.
REM kontra Procent
Procentenheter är relativa till föräldraelementets storlek/avstånd. Om <body> har en textstorlek på 16 pixlar och ett underordnat <p>-element har en storlek på 50%, betyder det att texten i <p>-elementet kommer att ha en textstorlek på 8 pixlar (50/100 * 16 = 8px). Här följer ett exempel på hur man kan tillämpa CSS:
body {
font-size: 16px;
}
p {
font-size: 50%;
}
Sammanfattningsvis kan man se skillnaderna mellan REM, EM och procent i följande tabell:
| Funktion | REM | EM | Procent |
| Relativt till | Rotelement | Föräldraelement | Föräldraelement |
| Arv | Från root | Från förälder | Från förälder |
| Användningsfall | Konsekventa layouter | Relativa storlekar | Responsiv design |
| Skalbarhet | Ja | Ja | Relativ |
När ska man undvika REM?
Trots REM-enheternas många fördelar, finns det tillfällen då de kan vara olämpliga:
- Utskrifter: Vid utskrifter är det bättre att använda absoluta mått för exakt kontroll, som tum eller millimeter.
- Finkornig kontroll: Om du behöver kontrollera ett elements storlek som är nära knutet till föräldern, är REM inte optimalt. Fasta enheter som pixlar passar då bättre.
- Animationer och övergångar: REM-enheter är inte lämpliga när animationer och övergångar behöver ändras gradvis. Ändringar i rotelementets textstorlek kommer att orsaka plötsliga förändringar.
- Äldre webbläsare: En del äldre webbläsare stöder inte REM-enheter. Då kan procent eller pixelbaserade enheter vara ett bättre alternativ.
Sammanfattning
Den här artikeln har förklarat vad REM är i CSS, hur man använder och beräknar dem samt vilka situationer som är lämpliga för REM-enheter. REM är en relativ enhet som kan ge konsekventa textstorlekar i dina applikationer.
Pixlar å andra sidan är en absolut enhet som inte ändras beroende på skärmstorlek eller omgivande element.
REM är inte optimalt för alla situationer, men det finns tillfällen då procent eller pixlar fungerar bättre.
Utforska gärna andra CSS-resurser för att lära dig mer om styling!
Var den här artikeln hjälpsam?
Tack för din feedback!