We need one simple setting to convert pixles to relative rem units.
We need any easy way to change the measurements when for example we need to change the font size in a mobile window.
Instead of changing a hundred different elements and tweaking our code by adding more line and giving us a headache we just use
this technique wiith global font size.
(this example all code is in one main.css file)
STEP 1
--Our root font size is 16px and that's the absolute default.
So in order to give us the abillity to change the unit's and give the user the ability to zoom in our page or even change
the default font size we se the font-size to 100%;
STEP 2.
-- Now that we set to 100% if we divide by 16 equals to 0.625;
STEP 3.
---Go to your css file and set your default font size to 62.5%;
html{
font-size:62.5%; //equal to 1rem. we now divide all our calculations by 10
}