Pixels REM Converters – Helper Functions in JavaScript

Helpers functions are small reusable utilities that can be used in any project so that you do not need to write the logic for same thing again and again. We are creating helper functions to convert rem and pixels css units into one another.

When you use rem instead of px as css unit in your app you will use rem based values inside your CSS. What if you don’t like the idea of using 1.6rem for 16px if the root font size is 10px. Because 1.6 rem is confusing to look at but you want to use it. You can use pixel value and convert it to rem. This way you will be looking at the pixel based value in your css file but for browser the output will be in rem. Then the browser will take care of converting it into px to display the output. In this video we created two helper functions to do that.

Root Font Size & CSS Units (Pixel, Rem, EM), Use REM Instead of PX

Pixels, Rem, Em Converter Utility in JQuery – CSS Units Conversion Formulas