Hvorfor bør du bruke rembaserte layouter

De rem Enhet brukes til å definere fonter i relative termer snarere enn med en absolutt størrelse i piksler. Men visste du at denne enheten er nyttig for layout og typografi?

I denne videoopplæringen fra CSS Layout-kurset lærer du hvorfor det er en stor fordel å bruke rem enheter for oppsett.

Fordelene med Rem-Based Layouts

 

I CSS Layout kurset utføres alle våre layoutspesifikasjoner ved hjelp av rem enhet. Som vi nevnte mer detaljert i typografi kurset, a rem Enheten er et flertall av roten skriftstørrelsen for siden din.

De rem Enheten er nyttig, ikke bare typografi, men også for oppsettet ditt, og jeg skal vise deg hvorfor du burde bruke rem enheter når du setter opp oppsettet ditt. 

La oss starte med å se på prøvesiden vi jobber med:

Hvis jeg deretter endrer skriftstørrelsen i nettleseren, kan du se at skriftstørrelsen øker på siden:

Nå, hvis jeg fortsetter å øke skriftstørrelsen og jeg oppdaterer, kan du nå se at hele oppsettet har tilpasset seg for å ta hensyn til den større skriftstørrelsen. 

Alt er fortsatt lesbart, og det er mulig fordi du bruker rem enheter for å sette opp hele oppsettet vårt, sørger vi for at alt er fleksibelt avhengig av rotfontestørrelsen til dokumentet vårt, som kommer fra nettleserinnstillingene.

På samme måte, hvis jeg reduserer fontstørrelsen tilbake til en veldig liten størrelse og oppdaterer igjen, kan du se at hele oppsettet har krympet igjen. 

Så ved å bruke disse rem enheter, sørger vi for at når en bruker endrer skriftstørrelsen, endres ikke selve teksten for å passe, men det samme gjør hele oppsettet.

Se hele kurset

I hele kurset, Start her: Lær CSS Layout, du legger det du har lært i denne videoen til praksis ved å lage en rekke oppsett ved å bruke rem enheter. Du lærer alt du trenger å vite for å lage de vanligste typene av layout i webdesign. Vi dekker dimensjonering, justering, avstand og beste praksis for å skape responsivt CSS.

Hvis du bare begynner og ønsker å mestre CSS, sjekk ut Lær CSS: The Complete Guide.

Eller du kan eksperimentere med flere kurs fra vår "Start Here" -serie for nybegynnere på webdesign:

  • Start her: Lær HTML-grunnleggende
  • Start her: Lær CSS typografi
  • Start her: Lær CSS Farger og Bakgrunn