Client-First for Webflow
Veličine i REMovi
Objašnjenje rem jedinica i odobrenih rem vrijednosti u Client-Firstu.
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.