Geek Answers Handbook

How to calculate REM for a type?

How do I convert PX to REM for my type? I read Jonathan Snook's article on using REM, but he used a font size: 62.5%, which by default matches your font size up to 10 pixels (to simplify the calculation). How would I convert my PX units to REM if I used 100%, 75%, etc.?

+10
css css3
source share
2 answers

Target Size / Base Size = Value

Since we can assume that browsers use 16px by default (after all, what Jonathan Snook suggested was 62.5% - 10 pixels), then your base is 16. If you want 32px, then 32/16 32 / 16 = 2 , you want 40px, then 40/16 40 / 16 = 2.5 , you want 24, then 24/16 24 / 16 = 1.5 .

The same goes for 75% ... Determine what 75% is (12), and do the same calculation. If you want 32px, then 32 / 12 = 2.666 , you want 40px, then 32 / 12 = 2.666 , you want 24, then 24/12 24 / 12 = 2 .

+30
source share

if you just add this code to your style file

 html { font-size: 62.5%; }

converts 1 rem = 10px. Now you will work with the base 10px. So

 body { font-size: 1.6 rem; }

you will have a font size of 1.6 * 10 = 16 pixels.

0
source share

More articles:


All Articles