Background
Have you wanted to scale ALL the things in an Ionic app? Yeah, me too. TL;DR: I converted all the px
to rem
.
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
rem
units (16px
for eachrem
orem
) - set
font-size
on the top-level<html>
to a percentage for scale -
em
,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 1px
values:
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
For v1.0.0-beta.11: ionic.rem.css | ionic.rem.min.css
For v1.0.0-beta.14: ionic.rem.css | ionic.rem.min.css
Have fun!