Fluid responsive

Alati

Dvije mogućnosti da napravimo naše Client-First Webflow stranice fluid-responsive

1. Vizualni konfigurator CSS isječka na ovoj stranici
2. Isti vizualni konfigurator u Finsweet Extension
   

Što je fluid responsive?

Kako okvir preglednika mijenja veličinu, dizajn se mijenja s njim.

Client-First fluid responsive uspoređen sa vw i vh skaliranjem

Kako okvir preglednika mijenja veličinu, dizajn se mijenja s njim.

Korištenje jedinica vw ili vh jedan je od načina da naš sadržaj bude fleksibilan pri skaliranju. Problemi s ovom metodom su:

• Moramo postaviti vw ili vh veličine na svaki element za koji želimo da bude fluidan.
• Elementi mogu brzo postati premali ili preveliki zbog linearnog skaliranja. vw i vh skaliraju linearno.
• Pristupačnost trpi jer zumiranje preglednika ne može utjecati na jedinice vw i vh.
• Upravljanje i održavanje našeg Webflow projekta sa vw i vh može biti izazovno, posebno za druge developere i klijente.

Client-First umjesto toga koristi "root-font scaling".

Root-font scaling

Client-First sustav koristi rem jedinice za sve veličine. Jedinica rem temelji se na jednoj stvari — HTML root veličini fonta.

Sve u našem projektu je relativno u odnosu na veličinu HTML fonta. Zbog toga imamo globalnu kontrolu nad svim veličinama u našem projektu.

Mijenjajući ovu veličinu, vizualno činimo naše rem "većima" ili "manjima". Naš vizualni fluid responsive generator radi na opsežnom skupu izračuna koji mijenjaju veličinu korijenskog fonta prema našim preferencijama.

Dodavanjem generiranog CSS koda naš projekt Webflow slijedi prilagođena pravila skaliranja veličine. Mijenjanje veličine HTML fonta preko prijelomnih točaka daje nam ultimativnu prilagodbu našeg prilagodljivog skaliranja.

Prednosti:

• Koristite Client-First kao što ga inače koristite. Ne postoji posebna promjena tijeka rada za fluid responsive web stranice u odnosu na web stranice koja nisu fluid responsive.
• Fluid responsive strategija izborni je dodatak. Dodajte ga ili nemojte dodati bilo kojem projektu.
• Fluid responsive može se dodati na kraju projekta nakon što je sve razvijeno.
• Preglednici mogu normalno zumirati.
• Poštivat će se postavke veličine fonta preglednika koje su izmijenili krajnji korisnici.
• Održavanje Webflow projekta u rem lakše je od projekta s fiksnom vw ili vh veličinom.
  

Vizualno izgradite fluid responsiveness

1. Vizualno konfigurirajte fluid responsive pravila skaliranja.
2. Kopirajte CSS kod u projekt Client-First Webflow.
3. Uživajte u fluidno responzivnoj stranici u rem-ovima.