Rem
Default sa px ang mga yunit sa webflow. Kung ita-type natin ang "10" sa anumang input ng Designer at pindutin ang "Enter", itatakda nito ang "10px".
Gumagamit ang Client-First ng rem, na maaari nating piliin sa dropdown ng yunit.
Ano ang rem?
Ang ibig sabihin ng Rem ay "root em" o “ugat na em”.
- Ang Rem ay kaugnay na yunit ng pagsukat batay sa font-size ng elementong ugat.
- Ang ugat na elemento ay html.
- Ang Rem ay nauugnay sa font-size ng html.
- Karamihan sa mga sukat na inilapat sa Client-First ay nasa rem.
Pagpapamana ng sukat ng font ng browser
Sa Client-First minana natin ang font-size ng html na mula sa browser.
Ang mga browser sa simula ay gumagamit ng 16px bilang kanilang panimula na html font-size.
1rem = 16px na palitan ang default o nakasadya sa mga browser.
Batay sa mga naaprubahang sukat ng Client-First, makakagawa tayo ng mabilis na palitan sa px at rem. Halimbawa, ang mga halaga ng rem na inaprubahan ng Client-First ay 0.5, 1, 1.5, 2, 2.5, 3, at iba pa.
Ang rem at Client-First ay makapangyarihang magkapares para sa pagsunod sa pinakamahusay na mga kasanayan sa pagiging aksesabilidad sa sukat ng font ng browser.
Ang matematika
Ang bawat 16px ay 1rem kapag ang font-size ng browser ay nakatakda sa "default" o “pasimula” sa mga setting ng browser.
Kapag binuo natin ang ating proyekto sa Webflow, palagi nating ginagamit ang 16px bilang ating base na halaga para sa pagkalkula ng rem.
Ang bawat palitan ng rem na pagsusukat ay nababatay sa bilang ng 16.
Upang ilipat ang halaga ng px sa rem, hatiin ang halagang ito ng 16 na beses.
64px / 16px = 4rem
Upang ilipat ang halaga ng rem sa px, paramihin ang halaga na ito ng 16 na beses.
2rem x 16px = 32px
Para sa kaginhawahan, iminumungkahi natin ang paggamit ng madaling nababasa na mga halaga ng rem tulad ng 1, 2, 2.5, 3, 4, 5.
Gusto nating iwasan ang pare-parehong paggamit ng mahabang halaga ng numero tulad ng 8.4375rem. Ang mga halagang ito ay mas mahirap tandaan at magpapabagal sa ating daloy ng trabaho.
Pagkakalkula sa Webflow Designer
Sa loob ng mga karamihang yunit na ini-input ng Webflow Designer, maaari nating kalkulahin ang rem sa loob ng Webflow.
Sa loob ng input ng width ng Designer, isulat ang "100/16rem", pindutin ang "Enter", at tingnan ang halaga ng rem na nakalkula.
Maaari nating hatiin ang anumang numero sa 16 para makuha ang halaga ng rem nito sa loob ng Webflow Designer.
Mga benepisyong aksesibilidad
Settings ng sukat ng font ng browser
Gumagamit ang mga browser ng 16px bilang kanilang pasadya na sukat ng font sa html — at pinapayagan ng mga browser ang gumagamit na baguhin ang nakasadya na sukat ng font. Maaaring baguhin ng mga gumagamit ang kanilang mga pagtatangi at baguhin ang setting ng sukat ng font.
Ang setting ng sukat ng font ng browser ay mahalagang paksa sa pagiging aksesibilidad. Kapag nabago ng mga gumagamit ang kanilang font ng browser, dapat umayon ang nilalaman ng website sa pagbabago. Ang sistemang rem ng Client-First ay umaangkop sa mga setting ng sukat ng font ng browser ng gumagamit.
Kapag nagtatrabaho tayo sa iba pang mga sukat ng yunit, tulad ng px at vw, binabalewala natin ang mga kagustuhan ng gumagamit na baguhin ang kanilang setting ng sukat ng font ng browser.
Zoom ng browser
Sinusunod din ni rem ang mga kontrol sa pag-zoom ng browser ng gumagamit. Kapag ang gumagamit ay nag-zoom paloob o palabas sa pahina, ang ating kaayusan at nilalaman sa rem ay mag-zoom kasama ng gumagamit.
Kapag gumamit tayo ng vw o vh units, hindi gagana ang zoom ng browser.
Umaasa ang vw sa lapad ng viewport ng browser (o taas sa kaso ng vh). Ang pagbabago lang sa bintana ng browser ang makakaapekto sa mga sukat na itinakda sa mga yunit na iyon.
Sinusunod ng Client-First ang pinakamahusay na mga kasanayan sa pagiging aksesibilidad. Ang desisyon na magtrabaho sa rem ay direktang nauugnay sa aksesibilidad na ito at benepisyo ng UX.
Matuto nang higit pa tungkol sa aksesibilidad gamit ang rem sa ating artikulo sa Paghahambing ng Wizardry vs. Client-First. Ito ay teknikal na pangkalahatang-ideya ng mga benepisyo ng rem bilang maaksesibilidad na yunit ng pagsukat.
Recommended px to rem values
Nasa ibaba ang isang listahan ng lahat ng inirerekomendang rem na halaga kasama ng kanilang na-convert na sukat ng px.
Ang mga naaprubahang halaga na mga ito ng Client-First ay isang rekomendasyon at hindi isang mahigpit na pangangailangan.
Interaktibo ang listahan ng mga sukat na ito. Baguhin ang mga halaga sa pamamagitan ng sticky navigation menu.
<div fs-richtext-component="fs-calc_component"></div>
Iminumungkahi ng Client-First na magtrabaho gamit ang mga halagang ito.
Mayroong 3 pagbubukod sa paggamit ng mga halaga sa itaas.
1. Tipograpiya
Ang paggamit ng 14px para sa sukat ng font ay karaniwan at inirerekomenda kapag masyadong malaki ang 16px. Ang 12px font-size ay kadalasang masyadong maliit para sa typography.
14px = 0.875rem
2. 2px na spacing
Gumamit ng 2px para sa maliit na espasyo. Kung kailangan ng halaga ng espasyo na mas mababa sa 4px, gumamit ng 2px.
2px = 0.125rem
3. Ang 1px ay 1px
Kapag gumagamit ng 1px, halimbawa bilang border ng CSS, gamitin ang 1px bilang halaga.
Hindi natin inirerekomenda ang pagpalit ng mga 1px na halaga sa rem.
Ang mga aparato na may retina ay may iba't ibang panuntunan sa pag-eskala kaysa sa mga hindi retina na mga aparato. Ang paggamit ng 1px ay lilikha ng eksaktong 1px na linya sa anumang aparato nang walang panghihimasok sa pag-eskala ng retina.
1px = 1px
Extension ng Finsweet para palitan ang px ng rem
Nag-aalok ang Finsweet Extension ng instrumento para palitan ang mga proyektong ginawa sa px papunta sa rem.
Papalitan nito ang bawat halaga sa proyekto mula sa px patungo sa nakalkulang halaga ng rem nito.
Sa loob ng tab na Client-First ng Finsweet Extension, pamamahalaan ng "PX to REM Migrator" na kendi ang sukat ng paglilipat ng yunit.