La CSSConf 2014 din Australia, Simurai a dat o prezentare cu adevărat uimitoare numită "Styling with Strings", unde a trecut mai multe tehnici de dezvoltare a browserului. Singurul sfat care mi-a statuat cu adevărat era: componentele UI ale componentelor cu EM, puneți spațiu între ele cu REM-uri. Sau, de regulă: EMs pentru padding, REMs pentru margine.
Motivul pentru care acest lucru este atât de interesant este faptul că acest lucru ne permite să scarăm întreaga noastră site-uri în sus și în jos pur și simplu prin schimbarea câtorva marimea fontului
proprietăţi.
Doriți ca toate componentele UI să fie mai mari? Bump-o pe tine corp font-size: 13px;
pâna la 15px
. Doriți să puneți un pic mai mult spațiu între aceste componente? Bump-o pe tine html font-size: 15px;
pâna la 17px
.
Urmăriți spațiul alb dintre aceste butoane crescând în timp ce formez elementul html marimea fontului
(și, prin urmare, globală umplutură
) în sus. Plăcuirea pe butoane rămâne fixată la padding: 1em 3m
.
În acest exemplu, formez marimea fontului
pe elementul corpului. După cum puteți vedea totul, cu excepția marginilor dintre elemente, crește proporțional.
Aceasta este o abordare cu adevărat rapidă, dar puternică pentru crearea de machete flexibile. Joacă-te singur cu demo-ul: