Easy way to convert pixels into the “em” unit without Converter
To make a responsive website, there is no alternative to use em. But converting pixels into em is daunting for some people. People also use an online converter to convert pixels to em. But they don’t need to. I will show you an easy way to convert pixels into em. Before start, you need to understand the full concept. SO, don’t skip anything
Base Pixel:
By default, browser font size is 16 px and we know that 16px =1em. Now do some school math.
I called these values(16px,32px,48px,64px) base pixels. We will calculate other values with respect to these base pixels.
Tip-1: Memorise these base pixels. Remember that for an increase of 16px, em is an increased by 1
4 Increment:
But what about values like 20px, 36px, 60px? They all are 4px away from their respective base pixel. Let’s do another math:
So for every 4px em value increases by 0.25em. Such as:
Tip-2: For every increase of 4px from the base pixel, em is increased by 0.25
8 increment:
Suppose we have 40 pixels, it is 8 px away from its base pixel 32.
Tip-3: For every increase of 8 px from the base pixel, em in increase by 0.5
Summary:
Using these laws, we cal do almost 90% of the task of responsive web design. Let’s recap :
Tip-1: Memorise these base pixels. Remember that for an increase of 16px, em is an increased by 1
Tip-2: For every increase of 4px from the base pixel, em is increased by 0.25
Tip-3: For every increase of 8 px from the base pixel, em in increase by 0.5
Tip-4: For every increase of 32 px from the base pixel, em is increased by 2
Tip-5: For every increase of 160 px from the base pixel, em is increased by 10
Conclusion:
IF use understands these 5 tips, you will no longer need to use the pixel to em calculator anymore. I hope this article is helpful to you. Follow me for more articles.
