Have you wanted to scale ALL the things in an Ionic app? Yeah, me too. TL;DR: I converted all the
I built a sweet-looking Ionic app, but there was one complaint: everything’s too small! That’s simple, I figured, let’s just scale it up. To my dismay, Ionic specifies everything in pixels, and there are a lot of things to tweak (there is no
$scale variable to universally change everything, and fixing
_variables.scss still misses a few spots). There must be another way.
rem units are nice
If you’ve used
em units, you would’ve discovered that they compound, so the size of an element is scaled relative to the
font-size of its parent, and so on – this just wouldn’t work for UI consistency.
rem units are the answer: everything is scaled relative to the
font-size of the top-level
<html> element. And browser support is pretty good.
So let’s drag Ionic into the 21st century!
- make everything use
font-sizeon the top-level
<html>to a percentage for scale
px, etc could still be used as needed for other things
Find and replace
This is a simple find/replace operation on *nix…
cat ionic.css | python -c "import sys,re;[sys.stdout.write(re.sub(r'([\d.]+)\s*px',(lambda m:str(float(m.group(1))/16)+'rem'),line)) for line in sys.stdin]" > ionic.rem.css
To preserve those sharp borders and thin lines, you could spare the
cat ionic.css | python -c "import sys,re;[sys.stdout.write(re.sub(r'([\d.]+)\s*px',(lambda m:(str(float(m.group(1))/16)+'rem') if float(m.group(1))>1 else m.group(0)),line)) for line in sys.stdin]" > ionic.rem.css