Sfat rapid încercați să combinați EM și REM

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.

Adăugarea spațiului alb

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.

Efectuarea de componente mai mari

Î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.

Concluzie

Aceasta este o abordare cu adevărat rapidă, dar puternică pentru crearea de machete flexibile. Joacă-te singur cu demo-ul:

Citirea în continuare

  • Citiți mai multe despre această tehnică pe blogurile lui Simurai și Jeremy Church
  • Luând "Erm ..." din Ems
  • Luându-i pe Ems și mai departe