Rem
Webflow bruger som standard px-enheder. Hvis vi skriver "10" i et hvilket som helst Designer-inputfelt og trykker på "Enter", vil det indstille det til "10px".
Client-First bruger rem, som vi kan vælge til højre for vores input (enheds-menuen).
Hvad er rem?
Rem står for "root ephemeral unit" eller "root em".
- Rem er en relativ måleenhed baseret på rodelementets font-size.
- Rodelementet er <html>.
- Rem er relativ til <html> fontstørrelse.
- Alle størrelser anvendt i Client-First måles i rem.
Rem arver browserskriftstørrelse
In I Client-First arver vi html-skriftstørrelsen fra browseren.
Browsere bruger oprindeligt 16px som standard html-skriftstørrelse.
1rem = 16px, når browserens skriftstørrelse er indstillet til browserens standardværdi.
Baseret på godkendte størrelser i Client-First kan vi hurtigt konvertere px til rem. For eksempel er godkendte rem-værdier i Client-First 0.5, 1, 1.5, 2, 2.5, 3 osv.
Brug af Client-First i vores anbefalede rem-system sikrer, at vi følger best practice i forhold til tilgængelighed og indholdsskalering.
Sådan udregnes rem
Hver 1rem = 16px, når browserens skriftstørrelse er indstillet til browserens standardværdi.
Når vi opretter vores Webflow-projekt, bruger vi 16px som vores grundværdi for beregning af rem.
Alle rem-beregninger i projektet er ganget med 16
Når vi konverterer px til rem, dividerer vi værdien med 16.
64px / 16px = 4rem
Når vi konverterer rem til px, ganger vi værdien med 16.
2rem x 16px = 32px
For nemhedens skyld foreslår vi at bruge let læselige rem-værdier som f.eks. 1, 2, 2.5, 3, 4, 5.
Vi ønsker at undgå konsekvent brug af lange talværdier som f.eks. 8.4375rem. Disse værdier er sværere at huske og vil bremse vores arbejdsprocess.
Beregninger i Webflow Designer
Inside most unit inputs of Webflow Designer, we can calculate rem natively in Webflow.
Når vi indtaster en værdi i Webflow Designer, kan vi i de fleste tilfælde foretage beregninger med rem direkte i Webflow.
I breddeindtastningen i Designer skal du indtaste "100/16rem", trykke på "Enter" og se den beregnede rem-værdi.
Du ser i nedenstående eksempel, når vi indtaster "100/16rem" og trykker "Enter", vil vores rem værdi blive udregnet
Vi kan dividere ethvert tal med 16 for at få dets rem-værdi direkte i Webflow Designer.
Tilgængelighedsfordele
Browserens skriftstørrelseindstillinger
Browsere bruger 16px som standard HTML-skriftstørrelse — og browsere giver brugeren mulighed for at opdatere standardskriftstørrelsen. Brugerne kan opdatere deres præferencer og ændre skriftstørrelseindstillingerne.
Browserens skriftstørrelseindstillinger er et væsentligt tilgængelighedsemne. Når brugere opdaterer deres browserskrift, skal hjemmesideindholdet tilpasses med ændringen. Client-First rem-systemet tilpasser sig brugerens skriftstørrelseindstillinger.
Når vi arbejder i andre enhedsmålinger, som fx px og vw, ignorerer vi brugerens præferencer for at opdatere deres browsers skriftstørrelsesindstillinger.
Browser zoom
Rem respekterer også brugerens browserzoomkontrol. Når en bruger zoomer ind eller ud på siden, vil vores layout og indhold i rem zoome sammen med brugeren.
Når vi bruger vw eller vh-enheder, vil browserzoom ikke fungere.
vw afhænger af browserens viewport-bredde (eller højde i tilfældet vh). Kun en ændring i browservinduet vil påvirke størrelser indstillet i disse enheder.
Client-First følger de bedste tilgængelighedspraksiser. Beslutningen om at arbejde i rem er direkte relateret til denne tilgængeligheds- og UX-fordel.
Lær mere om tilgængelighed ved hjælp af rem i vores Wizardry vs. Client-First-sammenligningsartikel. Dette er en teknisk oversigt over fordelene ved rem som en tilgængelig måleenhed.
Anbefalede px til rem-værdier
Nedenfor er en liste over alle anbefalede rem-værdier med deres konverterede px-måling.
Disse Client-First godkendte værdier er en anbefaling og ikke et strengt krav.
Denne liste over størrelser er interaktiv. Opdater værdier via den faste navigationsmenu.
{{We will add the px-rem calculator here}}
Client-First foreslår at arbejde med disse værdier.
Der er 3 undtagelser til at bruge ovenstående værdier
1. Typografi
At bruge 14px som skriftstørrelse er almindeligt og anbefales, når 16px er for stort. 12px skriftstørrelse er ofte for lille til typografi.
14px = 0.875rem
2. 2px spacing (Mellemrum)
Brug 2px til små mellemrum. Hvis en mellemrumsværdi under 4px er nødvendig, skal du bruge 2px.
2px = 0.125rem
3. 1px er 1px
Når du bruger 1px, f.eks. som en CSS-border, skal du bruge 1px som værdien.
Vi anbefaler ikke at konvertere 1px-værdier til rem.
Retina-enheder har forskellige skaleringsregler end ikke-retina-enheder. Brug af 1px vil skabe en præcis 1px-linje på enhver enhed uden forstyrrelse af retina-skaling.
1px = 1px
Finsweet udvidelsen px til rem migreringsværktøjet
Finsweet udvidelsen tilbyder et værktøj til at konvertere projekter oprettet i px til rem.
Det vil konvertere alle værdier i projektet fra px til den beregnede rem-værdi.
I Client-First fanen i Finsweet udvidelsen finder du "PX til REM Migrator"-candyen.