font-size의 변환, pixel을 em/rem으로

category IT/코딩 CSS

무찌마 / 2022. 3. 26. / 댓글

font-size 단위 변환

pixels (R)EM

 

계산 방법

 

2(r)em = " (root) font size(px, pixel) * 2 " px

body의 기본 font-size가 16px일 때 2(r)em은 16*2, 즉 32px

 

※ rem은 root의 기본 font-size에 대한 상대 수치

※ em은 parent element의 font-size에 대한 상대 수치

 

2px

= " 2 / (root/parent element) font-size " (r)em

= 0.125(r)em

 

폰트 계산기

 

webSemantics | Web development resourcesFont size conversion px-pt-em-rem-percent (websemantics.uk)

 

nekoCalc, PX to REM converter (소수점 넷째 4자리에서 반올림)

 

body의 기본 font-size를 16px로 설정한 경우

(Calculation based on a root font-size of 16 pixel)

 

1px	0.0625(r)em
2px	0.125(r)em
3px	0.1875(r)em
4px	0.25(r)em
5px	0.3125(r)em
6px	0.375(r)em
7px	0.4375(r)em
8px	0.5(r)em
9px	0.5625(r)em
10px	0.625(r)em
11px	0.6875(r)em
12px	0.75(r)em
13px	0.8125(r)em
14px	0.875(r)em
15px	0.9375(r)em
16px	1(r)em
17px	1.0625(r)em
18px	1.125(r)em
19px	1.1875(r)em
20px	1.25(r)em
21px	1.3125(r)em
22px	1.375(r)em
23px	1.4375(r)em
24px	1.5(r)em
25px	1.5625(r)em
26px	1.625(r)em
27px	1.6875(r)em
28px	1.75(r)em
29px	1.8125(r)em
30px	1.875(r)em
31px	1.9375(r)em
32px	2(r)em
33px	2.0625(r)em
34px	2.125(r)em
35px	2.1875(r)em
36px	2.25(r)em
37px	2.3125(r)em
38px	2.375(r)em
39px	2.4375(r)em
40px	2.5(r)em
41px	2.5625(r)em
42px	2.625(r)em
43px	2.6875(r)em
44px	2.75(r)em
45px	2.8125(r)em
46px	2.875(r)em
47px	2.9375(r)em
48px	3(r)em
49px	3.0625(r)em
50px	3.125(r)em

댓글