CSS의 모든 속성에 대한 REM 값 설정

Question

내 사이트에서 모든 곳에서 rem (가능한 모든 속성을 읽음)을 사용하고 싶습니다. 그러나 기본 REM을 사용하여 - 픽셀 전환 속도는 매우 직관적되지 않습니다 :

10px = 0.625rem 
12px = 0.75rem 
14px = 0.875rem 
16px = 1rem (base) 
18px = 1.125rem 
20px = 1.25rem 
24px = 1.5rem 
30px = 1.875rem 
32px = 2rem 

따라서 나는 글꼴 크기 1rem = 10px을 설정 할 html { font-size: 62.5%; }을 사용하고 있습니다. 그러나 어떻게 그 margin/padding/border/...을 전환율로 설정하고 싶다면 어떻게 작동합니까?

감사합니다.

Answer 1

우리는 의견이 덮여했지만 본질적으로 대답은 62.5 %보다는 10px하는 기본 글꼴 크기를 설정하는 것은 지금

html { font-size: 10px; } 

는 모든 렘 값은 1rem = 10px에서 작동합니다. 실제로 계산이 훨씬 간단 해집니다. = 15 픽셀

2rem

• 1.5rem = 20 픽셀 등

...와.

이제 margin:1rem은 margin:1opx을 의미합니다.