Share
Al 2014 CSSConf in Australia, Simurai ha tenuto una presentazione davvero sorprendente chiamata "Styling with Strings" in cui ha approfondito alcune tecniche per lo sviluppo in-browser. L'unico suggerimento che mi ha veramente colpito è stato questo: integrare i componenti dell'interfaccia utente con gli EM, mettere lo spazio tra di loro con i REM. O, come regola generale: EM per imbottitura, REM per margine.
Il motivo per cui questo è così interessante è perché questo ci permette di scalare i nostri siti interi su e giù semplicemente cambiandone alcuni dimensione del font proprietà.
Vuoi che i tuoi componenti dell'interfaccia utente siano tutti un po 'più grandi? Bump your body font-size: 13px; fino a 15px. Vuoi mettere un po 'più spazio bianco tra questi componenti? Bump your html font-size: 15px; fino a 17px.
Guarda gli spazi bianchi tra questi pulsanti aumentare mentre compongo l'elemento html dimensione del font (e quindi il globale imbottitura) verso l'alto. L'imbottitura sui pulsanti rimane stabilmente impostata su imbottitura: 1em 3em.
In questo esempio sto componendo il dimensione del font sull'elemento del corpo. Come puoi vedere tutto tranne i margini tra gli elementi crescono proporzionalmente.
Questo è un approccio davvero rapido ma potente alla creazione di layout flessibili. Gioca tu stesso con la demo:
Accentsconagua