Rem Calculator For Px to Rem Conversion

WordPress theme TwentyTwelve stylesheet uses rem values with  pixels. REM values and object line heights are calculated using two values, set by two variables:

$rems: 14;
$line_height: 24;

———- Rem Calculator

REM SIZE CALCULATOR

Rem

Line-height

———- Please check examples below.

* Use a pixels value with a rem fallback for margins, padding, font-size etc.
padding: 5px 0;  to  padding: 0.357142857rem 0; (5 / $rems)

* Here we are trying to set font-size and line-height based on the font-size
font-size: 16px  to  font-size: 1.142857143rem; (16 / $rems)  and  line-height: 1.5; ($line_height / 16)

———- Below are vertical spacing

Vertical spacing between most elements should use 24px or 48px like h1 to h6, p, form etc..
to maintain vertical rhythm:

.my-new-div {
margin: 24px 0;  to  margin: 1.714285714rem 0;  by  ( 24 / $rems )
}

Leave a Reply