How to use REM for Responsive Development

Table of Contents

Converting Existing Code PX into REM

If you made it this far then you understand the importance of REM, and you are dedicated to improving your code base and decreasing code duplication. We salute you for your valiant effort, dear web developer!

So, let’s start getting into details for how you can convert your code to REM. The first step is to understand how Pixels can become REM units. Let’s look at the following example”

PX units
  1. First off, you will need to consider that 1 rem = 16 pixels.
  2. So in this case, we will need to divide the units of the design in pixels by 16.
  3. For example, a font that was 24 pixels in size becomes: 1.5 rem or 24 (px) /16 = 1.5 (rem)

Another super easy way (and the easiest, honestly) to convert px to rem is simply to google “20px in rem”.  The calculation is done for you in that case which makes this an extremely short chapter.

Additional Mobile App Guides
Connect with us

Are you enjoying our guides? Share your thoughts and let us know what you would like us to write about next!