Veličine i REMovi

Rem

Webflow prema zadanim postavkama koristi px jedinice. Ako upišemo "10" u bilo koji field u Designer-u i pritisnemo "Enter", postavit će se "10px".

Client-First koristi rem, koji možemo odabrati u padajućem izborniku jedinica.

Što je rem?

Rem stoji za "root em".

• Rem je relativna mjerna jedinica temeljena na ^font-size korijenskog elementa.
• Korijenski element je ^html.
• Rem je relativan ^html veličini fonta.
• Većina veličina primijenjenih u Client-First-u su rem.

Nasljeđivanje veličine fonta preglednika

U Client-First-u nasljeđujemo ^{html font-size} iz preglednika.

Preglednici u početku koriste 16px kao svoju zadanu ^{html font-size}.

1rem = 16px konverzija je zadana postavka preglednika.

Na temelju veličina koje je odobrio Client-First, možemo napraviti brze px konverzije u rem. Na primjer, Client-First odobrene vrijednosti rem su 0.5, 1, 1.5, 2, 2.5, 3 i tako dalje.

Rem i Client-First moćan su par za praćenje najboljih praksi pristupačnosti s veličinom fonta preglednika.

Matematika

Svakih 16px je 1rem kada je ^font-size preglednika postavljena na "deafult" u postavkama preglednika.

Kada gradimo naš Webflow projekt, uvijek koristimo 16px kao osnovnu vrijednost za izračun rem.

Svaka pretvorba rema višekratnik je broja 16.

Za pretvaranje px vrijednosti u rem podijelite tu vrijednost sa 16.

64px / 16px = 4rem

Za pretvaranje rem vrijednosti u px pomnožite tu vrijednost sa 16.

2rem x 16px = 32px

Radi praktičnosti, predlažemo upotrebu lako čitljivih rem vrijednosti kao što su 1, 2, 2.5, 3, 4, 5.

Želimo izbjeći dosljednu upotrebu dugih brojčanih vrijednosti kao što je 8.4375rem. Te je vrijednosti teže zapamtiti i usporit će nas u tijeku rada.

Izračuni u Webflow Designeru

Unutar većine jediničnih unosa Webflow Designera, možemo izračunati rem nativno u Webflowu.

Unutar unosa širine Designera upišite "100/16rem", pritisnite "Enter" i pogledajte izračunatu rem vrijednost.

Bilo koji broj možemo podijeliti sa 16 na dobiti njegovu rem vrijednost unutar Webflow Designera.

Prednosti pristupačnosti

Postavke veličine fonta preglednika

Preglednici koriste 16px kao svoju zadanu ^html veličinu fonta — a preglednici dopuštaju korisniku da ažurira zadanu veličinu fonta. Korisnici mogu ažurirati svoje postavke i promijeniti postavke veličine fonta.

Postavke veličine fonta preglednika ključna su tema pristupačnosti. Kada korisnici ažuriraju font preglednika, sadržaj web stranice trebao bi se prilagoditi promjeni. Client-First rem sustav prilagođava se postavkama veličine fonta u pregledniku korisnika.

‍

Kada radimo u drugim mjernim jedinicama, kao što su px i vw, ignoriramo korisničke preference za ažuriranje postavki veličine fonta preglednika.

Zum preglednika

Rem također poštuje kontrole zumiranja preglednika korisnika. Kada korisnik povećava ili smanjuje stranicu, naš layout i rem sadržaj povećavat će se zajedno s korisnikom.

‍

Kada koristimo jedinice vw ili vh, zum preglednika neće raditi.‍

vw se oslanja na širinu prozora preglednika (ili visinu u slučaju vh). Samo će promjena u prozoru preglednika utjecati na veličine postavljene u tim jedinicama.

Client-First slijedi najbolje prakse pristupačnosti. Odluka o radu in rem izravno je povezana s ovom pristupačnošću i korisnim iskustvom.

Saznajte više o pristupačnosti pomoću rem-a u našem usporednom članku Wizardry i Client-First. Ovo je tehnički pregled prednosti rema kao pristupačne mjerne jedinice.

Preporučene vrijednosti px do rem

Below is a list of all recommended rem values with their converted px measurement.

These Client-First approved values are a recommendation and not a strict requirement.

This list of sizes is interactive. Update values through the sticky navigation menu.

Ispod je popis svih preporučenih rem vrijednosti s njihovim preračunatim px mjerama.

Ove vrijednosti odobrene od strane Client-Firsta-a su preporuka, a ne strogi uslov.

Ovaj popis veličina je interaktivan. Ažurirajte vrijednosti putem ljepljivog navigacijskog izbornika.

‍

{{We will add the px-rem calculator here}}

‍

Client-First predlaže rad s ovim vrijednostima.

Postoje 3 iznimke od korištenja gornjih vrijednosti.

‍

1. Tipografija

Korištenje 14px za veličinu fonta je uobičajeno i preporučuje se kada je 16px preveliko. Veličina fonta od 12px često je premala za tipografiju.‍

14px = 0.875rem

2. 2px razmak

Koristite 2px za mali razmak. Ako je potrebna vrijednost razmaka manja od 4px, upotrijebite 2px.‍

2px = 0.125rem

3. 1px je 1px

Kada koristite 1px, na primjer kao CSS ^border, koristite 1px kao vrijednost.

Ne preporučujemo pretvaranje vrijednosti od 1px u rem.

Retina uređaji imaju drugačija pravila skaliranja od uređaja bez retine. Korištenje 1px stvorit će liniju od točno 1px na bilo kojem uređaju bez smetnji skaliranja retine.

1px = 1px

Finsweet Extension px alat za migraciju rem

Finsweet Extension nudi alat za pretvaranje projekata izrađenih u px u rem.

Pretvorit će svaku vrijednost u projektu iz px u njegovu izračunatu rem vrijednost.

Unutar Client-First kartice Finsweet Extension, "PX to REM Migrator" upravljat će migracijom jedinica veličine.

‍