Veien til elegant responsiv tekst

by
Tweet
Share
Share
Pin
0 Shares

CSS (Cascading Style Sheets) er en av byggesteinene i brukergrensesnitt i web-, mobil- og skrivebordsapplikasjoner. Dette stilspråket har forskjellige verdier og egenskaper, noe som gjør det enkelt å gi applikasjoner forskjellige stiler og egenskaper. REM er en av verdiene du vil møte mye når du styler nettsidene dine ved hjelp av CSS.

I denne artikkelen vil jeg forklare REM i CSS, diskutere viktigheten av responsiv typografi i webdesign, beskrive hvordan REM-enheter beregnes, og nevne noen fordeler med å bruke REM i CSS.

Hva er REM i CSS?

Root-EM (REM) er enheter som indikerer et elements skriftstørrelse i forhold til rotelementets skriftstørrelse. REM er en relativ enhet, noe som betyr at alle verdiene som bruker den vil endres når skriftstørrelsen til rotelementet endres. Standard skriftstørrelse for de fleste nettlesere er 16px. Derfor, hvis rotelementet er 16px, vil REM-størrelsen være 1.

REM-enheter er det motsatte av absolutte enheter som piksler. Ta for eksempel denne koden:

<div>Hello World</div>

Dette er vår styling:

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

Blokkens bredde (200px) vil forbli den samme uavhengig av om skjermstørrelsen øker eller blir mindre. Denne bredden er ikke i forhold til noe i HTML-dokumentet vårt.

Det samme gjelder kanten på vår container; den forblir 1,5 piksler uavhengig av skjerm eller miljøvariasjon.

Viktigheten av responsiv typografi i webdesign

Responsiv typografi involverer mange ting, for eksempel tekstlayout, størrelse og mellomrom. Dette er noen av grunnene til at webdesignere implementerer responsiv webdesign:

  • Forbedret brukeropplevelse: Nettbrukere tiltrekkes av applikasjoner som er enkle å navigere. En applikasjon som tilpasser seg forskjellige skjermstørrelser og miljøer gir en hyggelig og sømløs brukeropplevelse.
  • Gjør det enkelt å justere til forskjellige visningsporter: Responsiv typografi sjekker tilgjengelig plass på en visningsport og justerer deretter. Dermed vil du ikke ha tilfeller av overstrukket tekst på store skjermer eller bittesmå tekster på små skjermer.
  • Forbedret lesbarhet: Et godt nettsted skal være enkelt å få tilgang til og lese. Investering i responsiv typografi sikrer at teksten på applikasjonen din justeres basert på skjermstørrelsen og retningen.
  • Konsekvent merkevarebygging: Etter hvert som kildekoden øker, kan du ha blandede skriftvarianter i applikasjonen. Responsiv design sikrer at du har konsistente designtilnærminger uavhengig av skjermstørrelse eller brukeratferd.
  • Integrerer med mediesøk: Responsiv typografi kan kombineres med mediesøk. Webdesignere kan designe forskjellige stiler gjennom mediespørringer der fonter justeres basert på egenskaper som skjermretning og størrelse.
  • Forbedret tilgjengelighet: Responsiv typografi er et av grunnlaget for en applikasjons tilgjengelighet. Som sådan kan brukere med varierende evner justere skjermstørrelsene og skriftene for å passe deres behov.
  Datavitenskap vs dataanalyse – hvilken datakarrierevei å følge?

Hvordan REM-enheter beregnes

REM-enheter beregnes i forhold til skriftstørrelsen til (root)-elementet. Denne funksjonen lar oss lage konsistente og skalerbare design ved å angi verdier basert på en enkelt rotverdi.

De fleste nettlesere er som standard satt til 16px. Du kan imidlertid sette skriftstørrelsen til rotverdien til et tall som 10px. Du kan ha noe sånt som dette:

html {
  font-size: 10px;
}

I et slikt tilfelle er 10px=1 REM

Vi kan bruke denne koden til å 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 tipsbilk.net</h1>
</body>
</html>

Denne koden har ingen stil og har et enkelt element, en H1, som sier «Velkommen til tipsbilk.net».

Skriftstørrelsen vil som standard være 16px, som betyr at 1REM=16px. Når vi gjengir denne siden, får vi dette:

Vi kan nå legge til et stylingark, styles.css, og demonstrere hvordan REM fungerer. Slik kobler du styles.css- og index.html-filer i HTML-dokumentets -seksjon:

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

Du kan da ha denne koden:

html {
  font-size: 10px;
}

I dette tilfellet, når vi definerer REM-tall, vil de være i forhold til 10px. Skriftstørrelsen på vår H1 vil også krympe, som vist på dette skjermbildet.

Vi kan nå endre størrelsen på vår H1 ved å bruke REM-verdier som følger:

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

Vår H1 nå vil være større med 35px=3,5REM.

Fordeler med å bruke REM i CSS

De fleste er vant til piksler (px) og prosenter som måleenheter når de skriver CSS-kode. Hvorfor ikke holde seg til disse to valgene i stedet for å velge REM-enheter? Dette er noen grunner til å bruke REM:

  • Øker skalerbarhet: Du kan endre rotelementets skriftstørrelse, noe som gjør REM-enheter skalerbare. En slik tilnærming gjør det enkelt å endre REM-enhetene proporsjonalt. REM-enhetene vil også justere når brukere justerer nettleserens skriftstørrelser.
  • Enkel å administrere: Du kan endre rotelementet i – eller -taggen, og REM-enhetene justeres automatisk. Denne tilnærmingen sparer deg for smerten ved å justere hvert element i CSS-filen din. Du kan dermed endre skriftstørrelsen på, la oss si, alle H1-er med en enkelt endring.
  • Konsekvent størrelse: REM-enheter kontrollerer skriftstørrelser og mellomrom. Du er dermed sikret at du vil ha konsistente skriftstørrelser på tvers av nettsidene dine ettersom de er i forhold til rotelementet.
  • Gjør det mulig å ha responsive design: Du kan lage design som tilpasser seg ulike skjermstørrelser og enheter. Når REM-enheter brukes sammen med mediespørringer, kan du justere skriftstørrelsene til rotelementet, og andre enheter vil justere proporsjonalt.

CSS REM vs. EM vs. prosenter

Du kan ha kommet over piksler, REM-er, EM-er og prosenter når du skriver CSS-kode. Mens alle disse enhetene brukes til å definere skriftstørrelser og mellomrom, kan de brukes i forskjellige scenarier og har forskjellige funksjoner. La oss sammenligne REM med forskjellige enheter:

REM vs EM

REM og EM er relative enheter, noe som betyr at de endres basert på en gitt verdi. Imidlertid er REM knyttet til rotelementet (), mens EM er knyttet til det overordnede (beholder) elementet. For eksempel har du en div som fungerer som en forelder og en annen div inne i forelderen som fungerer som et barn. Ta en titt på denne 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 stille inn EM-enhetene 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. Imidlertid har .child-elementet en skriftstørrelse på 1,2em, som er relativt til den overordnede klassen. Alle endringene i overordnet klasse blir automatisk overført til underordnet element.

REM vs. prosenter

Prosentenheter er i forhold til størrelsen/avstanden til det overordnede elementet. Så hvis vi har et overordnet element, slik som at har 16px som skriftstørrelse, kan vi sette et underordnet element, for eksempel en

til å ha en skriftstørrelse på 50 %, noe som betyr at det er 50 /100*16=8px.

Du kan illustrere dette ved å bruke denne koden:

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

Vi kan oppsummere forholdet mellom REM, EM og prosenter ved å bruke denne tabellen:

FeatureREMEMPercentage Relativt til Rotelement Foreldreelement /containerOverordnet element/ beholder Arv Fra rotFrom forelderFra forelderBrukstilfelle Egnet for konsistente oppsett Egnet for relative størrelser Egnet for responsive designSkalerbarhetJa Ja Relativt

Når du ikke skal bruke REM-enheter

Du kan bli fristet til å bruke REM-enheter i alle CSS-målingene dine på grunn av deres mange fordeler. Dette er imidlertid noen av tilfellene der de kan være upassende:

  • Når du har med utskrifter å gjøre: Hvis du vil trykke noe, vil du ha sikkerhet for at du har med absolutte verdier å gjøre. I slike tilfeller gir tommer eller millimeter deg nøyaktig kontroll over dimensjonene.
  • Når du vil ha finkornet kontroll: Hvis du ønsker å kontrollere et elements størrelse, som er tett knyttet til overordnet, vil ikke REM være et godt alternativ. I slike tilfeller vil absolutte eller faste enheter som piksler være et perfekt valg.
  • Når det gjelder animasjoner og overganger: REM-enheter egner seg ikke der du ønsker at størrelsen på animasjoner og overganger skal endres gradvis. Når du bruker REM-enheter, vil en viss endring i rotelementets skriftstørrelse forårsake brå endringer i overgangene eller animasjonene.
  • Når du har å gjøre med eldre nettlesere: Noen eldre nettlesere støtter ikke REM-enheter. I slike tilfeller kan du bruke prosenter eller pikselbaserte enheter.

Konklusjon

Vi håper nå du forstår hvordan du bruker REM i CSS, beregner dem og hvor du skal bruke dem. REM-verdier er relative verdier, noe som betyr at du kan ha konsistente skriftstørrelser i applikasjonene dine.

På den annen side er piksler absolutte verdier som ikke endres basert på størrelsen på visningsporten eller omkringliggende elementer.

Slike REM-verdier er imidlertid ikke aktuelt i alle tilfeller, da det er noen tilfeller hvor prosenter og piksler passer bedre.

Lær mer om styling ved å bruke disse CSS-ressursene.

Var denne artikkelen til hjelp?

Takk for din tilbakemelding!