Share
Vid 2014 CSSConf i Australien gav Simurai en riktigt fantastisk presentation kallad "Styling with Strings" där han gick över en hel del tekniker för att utveckla webbläsaren. Det enda tipset som verkligen stod för mig var detta: pad UI-komponenter med EM, placera utrymme mellan dem med REMs. Eller som en tumregel: EMs för stoppning, REMs för marginal.
Anledningen till att detta är så intressant är att det här gör att vi kan skala våra hela sidor upp och ner helt enkelt genom att ändra några textstorlek egenskaper.
Vill du ha alla UI-komponenter till alla är lite större? Bump din kropp font-size: 13px; upp till 15px. Vill du lägga lite mer mellanrum mellan dessa komponenter? Bump din html font-size: 15px; upp till 17px.
Titta på mellanslag mellan dessa knappar ökar när jag ringer html-elementets textstorlek (och därmed den globala stoppning) uppåt. Polstret på knapparna förblir bestämt inställt på vaddering: 1em 3em.
I det här exemplet ringer jag upp textstorlek på kroppselementet. Som du kan se allt utom marginalerna mellan elementen växer proportionellt.
Detta är ett riktigt snabbt men kraftfullt sätt att skapa flexibla layouter. Spela med demo själv:
Accentsconagua