Vejen til elegant responsiv tekst

Af
Tweet
Share
Share
Pin

CSS (Cascading Style Sheets) er en af ​​byggestenene i brugergrænseflader i web-, mobil- og desktopapplikationer. Dette stylingsprog har forskellige værdier og egenskaber, hvilket gør det nemt at give applikationer forskellige stilarter og egenskaber. REM er en af ​​de værdier, du vil møde meget, når du styler dine websider ved hjælp af CSS.

I denne artikel vil jeg forklare REM i CSS, diskutere vigtigheden af ​​responsiv typografi i webdesign, beskrive hvordan REM-enheder beregnes og nævne nogle fordele ved at bruge REM i CSS.

Hvad er REM i CSS?

Root-EM (REM) er enheder, der angiver et elements skriftstørrelse i forhold til rodelementets skriftstørrelse. REM er en relativ enhed, hvilket betyder, at alle de værdier, der bruger den, ændres, når skriftstørrelsen på rodelementet ændres. Standardskriftstørrelsen i de fleste browsere er 16px. Således, hvis rodelementet er 16px, vil REM-størrelsen være 1.

REM-enheder er det modsatte af absolutte enheder som pixels. Tag for eksempel denne kode:

<div>Hello World</div>

Dette er vores styling:

div {
  border: 1.5px solid black;
  width: 200px;
}

Blokkens bredde (200px) forbliver den samme, uanset om skærmstørrelsen øges eller bliver mindre. Denne bredde er ikke i forhold til noget i vores HTML-dokument.

Det samme gælder for vores containers kant; den forbliver 1,5 px uanset skærm eller miljøvariation.

Betydningen af ​​responsiv typografi i webdesign

Responsiv typografi involverer en masse ting, såsom tekstlayout, størrelse og mellemrum. Dette er nogle af grundene til, at webdesignere implementerer responsivt webdesign:

  • Forbedret brugeroplevelse: Webbrugere tiltrækkes af applikationer, der er nemme at navigere. En applikation, der tilpasser sig forskellige skærmstørrelser og miljøer, giver en behagelig og problemfri brugeroplevelse.
  • Gør det nemt at justere til forskellige visningsporte: Responsiv typografi kontrollerer den tilgængelige plads på en visningsport og justerer derefter. Du vil således ikke have tilfælde af overspændte tekster på store skærme eller bittesmå tekster på små skærme.
  • Forbedret læsbarhed: En god hjemmeside skal være let at få adgang til og læse. Investering i responsiv typografi sikrer, at teksten på din applikation justeres baseret på skærmstørrelsen og orienteringen.
  • Konsekvent branding: Efterhånden som din kildekode stiger, kan du have blandede skrifttypevariationer i din applikation. Responsivt design sikrer, at du har ensartede designtilgange uanset skærmstørrelse eller brugeradfærd.
  • Integreres med medieforespørgsler: Responsiv typografi kan kombineres med medieforespørgsler. Webdesignere kan designe forskellige stilarter gennem medieforespørgsler, hvor skrifttyper justeres baseret på egenskaber såsom skærmretning og størrelse.
  • Forbedret tilgængelighed: Responsiv typografi er et af grundlaget for en applikations tilgængelighed. Som sådan kan brugere med forskellige evner justere skærmstørrelserne og skrifttyperne, så de passer til deres behov.
  Byg en Python Multiplication Table App med OOP

Hvordan REM-enheder beregnes

REM-enheder beregnes i forhold til (rod)-elementets skriftstørrelse. Denne funktion giver os mulighed for at skabe konsistente og skalerbare designs ved at indstille værdier baseret på en enkelt rodværdi.

De fleste browsere er som standard indstillet til 16px. Du kan dog indstille skriftstørrelsen af ​​rodværdien til et tal som 10px. Du kan have sådan noget:

html {
  font-size: 10px;
}

I et sådant tilfælde er 10px=1 REM

Vi kan bruge denne kode til at demonstrere:

<!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 toadmin.dk</h1>
</body>
</html>

Denne kode har ingen styling og har et enkelt element, en H1, der siger “Velkommen til toadmin.dk”.

Skriftstørrelsen vil som standard være 16px, hvilket betyder, at 1REM=16px. Når vi gengiver denne side, får vi dette:

Vi kan nu tilføje et stylingark, styles.css, og demonstrere, hvordan REM fungerer. Sådan forbinder du styles.css og index.html filer i dit HTML-dokuments -sektion:

   <link rel="stylesheet" href="https://wilku.top/the-path-to-elegant-responsive-text/styles.css">

Du kan så have denne kode:

html {
  font-size: 10px;
}

I dette tilfælde, når vi definerer REM-tal, vil de være i forhold til 10px. Skriftstørrelsen på vores H1 vil også krympe, som vist på dette skærmbillede.

Vi kan nu ændre størrelsen på vores H1 ved at bruge REM-værdier som følger:

h1 {
    font-size: 3.5rem; /* Equivalent to 35 pixels (3.5rem * 10px = 35px) */
  }

Vores H1 bliver nu større ved 35px=3,5REM.

Fordele ved at bruge REM i CSS

De fleste mennesker er vant til pixels (px) og procenter som deres måleenheder, når de skriver CSS-kode. Hvorfor ikke holde sig til disse to valg i stedet for at vælge REM-enheder? Dette er nogle grunde til at bruge REM:

  • Øger skalerbarheden: Du kan ændre rodelementets skriftstørrelse, hvilket gør REM-enheder skalerbare. En sådan tilgang gør det nemt at ændre REM-enhederne proportionalt. REM-enhederne vil også justere, når brugere justerer deres browsers skriftstørrelser.
  • Let at administrere: Du kan ændre rodelementet i – eller -tagget, og REM-enhederne justeres automatisk. Denne tilgang sparer dig for smerten ved at justere hvert element i din CSS-fil. Du kan således ændre skriftstørrelsen på, lad os sige, alle H1’ere med en enkelt ændring.
  • Konsekvent størrelse: REM-enheder styrer skriftstørrelser og mellemrum. Du er således sikret, at du vil have ensartede skriftstørrelser på tværs af dine websider, da de er i forhold til rodelementet.
  • Gør det muligt at have responsive designs: Du kan lave designs, der tilpasser sig forskellige skærmstørrelser og enheder. Når REM-enheder bruges sammen med medieforespørgsler, kan du justere skriftstørrelserne på rodelementet, og andre enheder justeres proportionalt.

CSS REM vs. EM vs. procenter

Du er muligvis stødt på pixels, REM’er, EM’er og procenter, når du skriver CSS-kode. Mens alle disse enheder bruges til at definere skriftstørrelser og mellemrum, er de anvendelige i forskellige scenarier og kommer med forskellige funktioner. Lad os sammenligne REM med forskellige enheder:

REM vs EM

REM og EM er relative enheder, hvilket betyder, at de ændrer sig baseret på en given værdi. REM er dog bundet til rodelementet (), mens EM er bundet til det overordnede (container) element. For eksempel har du en div, der fungerer som en forælder, og en anden div inde i den forælder, der fungerer som et barn. Tag et kig på denne kode:

<div class="parent">
    <p>This is the parent element.</p>
    <div class="child">
      <p>This is the child element.</p>
    </div>
  </div>

Du kan indstille EM-enhederne som følger:

.parent {
  font-size: 1.5em; 
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}
.child {
  font-size: 1.2em; 
  color: #333;
}

Vi har tildelt .parent-klassen en skriftstørrelse på 1,5em. Dog har .child-elementet en skriftstørrelse på 1,2em, hvilket er relativt til den overordnede klasse. Alle ændringer i den overordnede klasse vil automatisk blive overført til det underordnede element.

REM vs. procenter

Procentenheder er i forhold til størrelsen/afstanden af ​​det overordnede element. Så hvis vi har et overordnet element, såsom at har 16px som skriftstørrelse, kan vi indstille et underordnet element, såsom en

til at have en skriftstørrelse på 50%, hvilket betyder, at det er 50 /100*16=8px.

Du kan illustrere dette ved hjælp af denne kode:

body {
  font-size: 16px;
}
p {
  font-size: 50%;
}

Vi kan opsummere forholdet mellem REM, EM og procenter ved hjælp af denne tabel:

FeatureREMEMPcentage Relativ til rodelement Forælderelement /containerForælderelement/ container ArvFra rodFra rodFra forælderFrom forælderBrugstilfælde Velegnet til ensartede layoutsVegnet til relative størrelserVelegnet til responsive designsSkalerbarhedJaJa Relativ

Hvornår må man ikke bruge REM-enheder

Du kan blive fristet til at bruge REM-enheder i alle dine CSS-målinger på grund af deres mange fordele. Dette er dog nogle af de tilfælde, hvor de kan være upassende:

  • Når du har med print at gøre: Hvis du vil trykke noget, så vil du have sikkerhed for, at du har med absolutte værdier at gøre. I sådanne tilfælde giver tommer eller millimeter dig præcis kontrol over dimensionerne.
  • Når du ønsker finkornet kontrol: Hvis du vil kontrollere et elements størrelse, som er tæt knyttet til forælderen, vil REM ikke være en god mulighed. I sådanne tilfælde vil absolutte eller faste enheder som pixels være et perfekt valg.
  • Når man har med animationer og overgange at gøre: REM-enheder er ikke egnede, hvor man ønsker, at størrelsen af ​​animationer og overgange skal ændre sig gradvist. Når du bruger REM-enheder, vil en vis ændring i rodelementets skriftstørrelse forårsage pludselige ændringer i overgangene eller animationerne.
  • Når du har at gøre med ældre browsere: Nogle ældre browsere understøtter ikke REM-enheder. I sådanne tilfælde kan du bruge procenter eller pixelbaserede enheder.

Konklusion

Vi håber nu, at du forstår, hvordan du bruger REM i CSS, beregner dem, og hvor du skal bruge dem. REM-værdier er relative værdier, hvilket betyder, at du kan have ensartede skriftstørrelser i dine applikationer.

På den anden side er pixels absolutte værdier, der ikke ændres baseret på størrelsen af ​​visningsporten eller omgivende elementer.

Sådanne REM-værdier er dog ikke anvendelige i alle tilfælde, da der er nogle tilfælde, hvor procenter og pixels passer bedre.

Lær mere om styling ved hjælp af disse CSS-ressourcer.

Var denne artikel til hjælp?

Tak for din feedback!