픽셀에서 REM 계산 하는 법

폰트 크기를 REM 으로 지정하는 경우, 정확한 크기를 알고 싶을 때가 있다. 

디자이너가 px 단위로 줄 경우 그러지 않을까?

 

그럼, 픽셀을 어떻게 REM 으로 변경할 수 있을까?

html{
 font-size:16px;
}

위와 같이 root 가 16px 인 경우 계산식은 아래와 같다.

 

// 계산 방법 = 지정할 픽셀 / Root 픽셀

8px = 8/16 = 0.5 rem;
16px = 16 / 16 = 1 rem;
20px = 20 / 16 = 1.25 rem;
32px = 32 / 16 = 2 rem;

html{
 font-size:16px;
}

/*
 20px 크기를 주고 싶을때
*/
h3{
 font-size:1.25rem;
}