CSS (Cascading Style Sheets) är en av byggstenarna i användargränssnitt i webb-, mobil- och skrivbordsapplikationer. Detta stilspråk har olika värden och egenskaper, vilket gör det enkelt att ge applikationer olika stilar och egenskaper. REM är ett av värdena du kommer att stöta på mycket när du stylar dina webbsidor med CSS.
I den här artikeln kommer jag att förklara REM i CSS, diskutera vikten av responsiv typografi i webbdesign, beskriva hur REM-enheter beräknas och nämna några fördelar med att använda REM i CSS.
Innehållsförteckning
Vad är REM i CSS?
Root-EM (REM) är enheter som indikerar ett elements teckenstorlek i förhållande till rotelementets teckenstorlek. REM är en relativ enhet, vilket betyder att alla värden som använder den kommer att ändras när teckenstorleken på rotelementet ändras. Standardteckensnittsstorleken för de flesta webbläsare är 16px. Således, om rotelementet är 16px, kommer REM-storleken att vara 1.
REM-enheter är motsatsen till absoluta enheter som pixlar. Ta till exempel den här koden:
<div>Hello World</div>
Detta är vår styling:
div {
border: 1.5px solid black;
width: 200px;
}
Blockets bredd (200px) kommer att förbli densamma oavsett om skärmstorleken ökar eller blir mindre. Denna bredd är inte relativt till någonting i vårt HTML-dokument.
Detsamma gäller gränsen på vår container; den förblir 1,5 pixlar oavsett skärm eller miljövariation.
Vikten av responsiv typografi i webbdesign
Responsiv typografi involverar många saker, som textlayout, storlek och avstånd. Det här är några av anledningarna till att webbdesigners implementerar responsiv webbdesign:
- Förbättrad användarupplevelse: Webbanvändare lockas till applikationer som är lätta att navigera. En applikation som anpassar sig till olika skärmstorlekar och miljöer erbjuder en njutbar och sömlös användarupplevelse.
- Gör det enkelt att anpassa till olika visningsportar: Responsiv typografi kontrollerar det tillgängliga utrymmet på en visningsport och justerar därefter. Således kommer du inte att ha fall av översträckta texter på stora skärmar eller små texter på små skärmar.
- Förbättrad läsbarhet: En bra webbplats ska vara lätt att komma åt och läsa. Att investera i responsiv typografi säkerställer att texten i din applikation anpassas utifrån skärmstorlek och orientering.
- Konsekvent varumärke: När din källkod ökar kan du ha blandade teckensnittsvariationer i din applikation. Responsiv design säkerställer att du har konsekventa designmetoder oavsett skärmstorlek eller användarbeteende.
- Integreras med mediafrågor: Responsiv typografi kan kombineras med mediafrågor. Webbdesigners kan designa olika stilar genom mediefrågor där teckensnitt justeras baserat på egenskaper som skärmorientering och storlek.
- Förbättrad tillgänglighet: Responsiv typografi är en av grunderna för en applikations tillgänglighet. Som sådan kan användare med olika förmågor justera skärmstorlekarna och teckensnitten för att passa deras behov.
Hur REM-enheter beräknas
REM-enheter beräknas i förhållande till teckenstorleken för (root) elementet. Den här funktionen låter oss skapa konsekventa och skalbara design genom att ställa in värden baserat på ett enda rotvärde.
De flesta webbläsare är som standard inställda på 16px. Du kan dock ställa in teckenstorleken för rotvärdet till en siffra som 10px. Du kan ha något sånt här:
html {
font-size: 10px;
}
I ett sådant fall är 10px=1 REM
Vi kan använda den här koden för att demonstrera:
<!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>Welcome to adminvista.com</h1> </body> </html>
Den här koden har ingen stil och har ett enda element, en H1, som säger ”Välkommen till adminvista.com”.
Teckenstorleken är som standard 16px, vilket betyder att 1REM=16px. När vi renderar den här sidan får vi det här:
Vi kan nu lägga till ett stylingblad, styles.css, och visa hur REM fungerar. Så här länkar du styles.css- och index.html-filer i HTML-dokumentets
-sektion:<link rel="stylesheet" href="https://wilku.top/the-path-to-elegant-responsive-text/styles.css">
Du kan då ha denna kod:
html {
font-size: 10px;
}
I det här fallet, när vi definierar REM-siffror, kommer de att vara relativa till 10px. Teckenstorleken på vår H1 kommer också att krympa, som visas i den här skärmdumpen.
Vi kan nu ändra storleken på vår H1 med hjälp av REM-värden enligt följande:
h1 {
font-size: 3.5rem; /* Equivalent to 35 pixels (3.5rem * 10px = 35px) */
}
Vår H1 kommer nu att bli större vid 35px=3,5REM.
Fördelar med att använda REM i CSS
De flesta människor är vana vid att pixlar (px) och procentsatser är sina måttenheter när de skriver CSS-kod. Varför inte hålla fast vid dessa två val istället för att välja REM-enheter? Det här är några anledningar till att använda REM:
- Ökar skalbarheten: Du kan ändra rotelementets teckenstorlek, vilket gör REM-enheter skalbara. Ett sådant tillvägagångssätt gör det enkelt att ändra REM-enheterna proportionellt. REM-enheterna kommer också att justeras när användare justerar webbläsarens teckensnittsstorlekar.
- Lätt att hantera: Du kan ändra rotelementet i taggen eller , och REM-enheterna justeras automatiskt. Detta tillvägagångssätt räddar dig från smärtan att justera varje element i din CSS-fil. Du kan alltså ändra teckensnittsstorleken på, låt oss säga, alla H1:or med en enda ändring.
- Konsekvent storlek: REM-enheter styr teckenstorlekar och avstånd. Du är alltså säker på att du kommer att ha konsekventa teckenstorlekar på dina webbsidor eftersom de är i förhållande till rotelementet.
- Gör det möjligt att ha responsiv design: Du kan skapa design som anpassar sig till olika skärmstorlekar och enheter. När REM-enheter används tillsammans med mediefrågor kan du justera teckenstorlekarna för rotelementet, och andra enheter kommer att justeras proportionellt.
CSS REM vs. EM vs. Procentandelar
Du kan ha stött på pixlar, REM, EM och procenttal när du skrev CSS-kod. Även om alla dessa enheter används för att definiera teckenstorlekar och avstånd, är de tillämpliga i olika scenarier och kommer med olika funktioner. Låt oss jämföra REM med olika enheter:
REM vs EM
REM och EM är relativa enheter, vilket betyder att de ändras baserat på ett givet värde. REM är dock knuten till rotelementet (), medan EM är knutet till det överordnade elementet (behållaren). Till exempel har du en div som fungerar som en förälder och en annan div inuti föräldern som agerar som ett barn. Ta en titt på den här koden:
<div class="parent"> <p>This is the parent element.</p> <div class="child"> <p>This is the child element.</p> </div> </div>
Du kan ställa in EM-enheterna enligt följande:
.parent {
font-size: 1.5em;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
}
.child {
font-size: 1.2em;
color: #333;
}
Vi har tilldelat .parent-klassen en teckenstorlek på 1,5em. Däremot har .child-elementet en teckenstorlek på 1,2em, vilket är relativt till den överordnade klassen. Alla ändringar i den överordnade klassen kommer automatiskt att överföras till det underordnade elementet.
REM vs. procent
Procentenheter är relativa till det överordnade elementets storlek/avstånd. Så, om vi har ett överordnat element, som att
har 16px som teckenstorlek, kan vi ställa in ett underordnat element, som enatt ha en teckenstorlek på 50 %, vilket betyder att det är 50 /100*16=8px.
Du kan illustrera detta med den här koden:
body {
font-size: 16px;
}
p {
font-size: 50%;
}
Vi kan sammanfatta förhållandet mellan REM, EM och procentsatser med hjälp av denna tabell:
FeatureREMEMPcentage Relativt till Rotelement Föräldraelement /behållareFöräldraelement/ behållare ArvFrån rootFrån förälderFrån förälderAnvändningsfall Lämplig för konsekventa layouter Lämplig för relativa storlekarLämplig för responsiv designSkalbarhetJaJa Relativ
När man inte ska använda REM-enheter
Du kan bli frestad att använda REM-enheter i alla dina CSS-mätningar på grund av deras många fördelar. Men det här är några av fallen där de kan vara olämpliga:
- När du har att göra med utskrifter: Om du vill skriva ut något, då vill du ha försäkran om att du har att göra med absoluta värden. I sådana fall ger tum eller millimeter dig exakt kontroll över måtten.
- När du vill ha finkornig kontroll: Om du vill kontrollera ett elements storlek, som är nära knuten till föräldern, kommer REM inte att vara ett bra alternativ. I sådana fall kommer absoluta eller fasta enheter som pixlar att vara ett perfekt val.
- När det gäller animationer och övergångar: REM-enheter är inte lämpliga där du vill att storleken på animationer och övergångar ska ändras gradvis. När du använder REM-enheter kommer en viss förändring i rotelementets teckenstorlek att orsaka plötsliga förändringar i övergångarna eller animationerna.
- När du har att göra med äldre webbläsare: Vissa äldre webbläsare stöder inte REM-enheter. I sådana fall kan du använda procentsatser eller pixelbaserade enheter.
Slutsats
Vi hoppas nu att du förstår hur man använder REM i CSS, beräknar dem och var man använder dem. REM-värden är relativa värden, vilket innebär att du kan ha konsekventa teckenstorlekar i dina applikationer.
Å andra sidan är pixlar absoluta värden som inte ändras baserat på storleken på visningsporten eller omgivande element.
Sådana REM-värden är dock inte tillämpliga i alla fall, eftersom det finns vissa fall där procent och pixlar passar bättre.
Läs mer om styling med dessa CSS-resurser.
var den här artikeln hjälpsam?
Tack för din feedback!