Well, by sneaking a Trojan horse into your components and use it to control all the size related CSS properties.
What Trojan horse? Good ol’ font-size, hooked up to EM based units.
Read the article: Sizing (Web) components
As I zoom in, that is, make the text larger in my browser, I’m no longer at a 14pt/16px baseline. 100%/1em in my world is now a different number, maybe 18pt, maybe 32px.
Read the article: The EMs have it: Proportional Media Queries FTW!
There are two main techniques that are extolled:
Let's review these two approaches before I reveal the magical third.
- Size with px
- Size with em
Read the article: Font sizing with rem
You all probably knows those good ol’ pixels right?
So today we have to talk about your new best-friend, of course I mean the EM measure unit!
Read the article: em vs px
It's the new religion for web crafter around the interwebs for the next 2 years (or less)!
I think rem is better than em. I prefer it in many cases.
You can find Bali Balo on CodePen.
To make it even easier to make style rules that depend only on the default font size, a new unit is in development: the rem. The rem (for "root em") is the font size of the root element of the document.
Unlike the em, which may be different for each element, the rem is constant throughout the document.
You can find it on W3C spec.
Every answer is about em or rem. Why? Because the web craftswoman/man of 2013 doesn't use pixel anymore.emmmmmm.com
This is a CSS creation build with 100% em. Just open it and change the font-size on the body element in SCSS. The whole object scales without any problem.
You have a good example why em is better than px? Please let me know in the comments!