Junsoo Park

Morden Life, Every body has Several devices, not only personal computer and phone but also has laptops, tablet PCs, and bunch of similar devices!

Unfortunately, Every devices' has different screen resolutions and If we set up our css project with px we need to change whole of this values manually! However, if you change the px to rem works you don't need to do!

In this post, I will introduce Two ways to apply rem changing tips but only one solution will be fine.

1. Set Default Font-Size as a Pixel unit

This is the simplest way to apply rem unit into your css scripts. you just set up the 10px into your html tag and divide whole px unit by 10

However, this is a absolute value. even if the other user want to set up the other default value, They always see the same size on every devices or application. Moreover, If the browser didn't support zoom function, some case, it's really hard to read your web application depend on small screens.

2. Set Default Font-Size as a % Unit

It's a simple trick. 10 / 16 = 0.625 so you just set up your font-size: 62.5% then 1rem means 10px.

This solution solves if the browser has different default font size, it can handle with at least it's not too small.

The finest reason why you need to apply this trick is you don't need to change whole of your font-size when you would like to change your web application re-design.

Enjoy this 62.5 trick and css!