Share
På 2014 CSSConf i Australia ga Simurai en virkelig fantastisk presentasjon kalt "Styling with Strings" hvor han gikk over ganske mange teknikker for å utvikle i nettleseren. Det ene tipset som virkelig sto ut for meg var dette: Pad UI-komponenter med EM, plasser mellom dem med REMs. Eller som en tommelfingerregel: EMs for polstring, REMs for margin.
Årsaken til at dette er så interessant er at dette gir oss mulighet til å skalere våre hele sider opp og ned ganske enkelt ved å endre noen få skriftstørrelse eiendommer.
Ønsker UI-komponentene til alle å være litt større? Bump din kropp font-size: 13px; opp til 15px. Vil du legge litt mer mellomrom mellom disse komponentene? Bump din html font-size: 15px; opp til 17px.
Se hvite mellomrom mellom disse knappene øke når jeg ringer html-elementet skriftstørrelse (og dermed den globale padding) oppover. Padding på knappene forblir resolut satt til polstring: 1em 3em.
I dette eksemplet ringer jeg opp skriftstørrelse på kroppselementet. Som du kan se alt bortsett fra at margenene mellom elementene vokser proporsjonalt.
Dette er en veldig rask, men kraftig tilnærming til å lage fleksible layouter. Spill med demoen selv:
Accentsconagua