유체 레이아웃을위한 Em 대 px 설정

Question

Im 최적의 글꼴 크기 및 레이아웃 크기 결정에 대한 내용 ... Im 및 px 대신 em을 조사합니다.

내가 이해하는 것으로부터, 만약 내가 이렇게하면,

html { 
font-size: 16px; 
} 

body { 
    font-size: 1em; 
} 

그것은 16px = 1em 있도록 브라우저를 강제하고, 그 바로 원하는 픽셀/16을 계산하여 폭 및 높이 특성을 저를 사용합니까?

Answer 1

거의 모든 브라우저가 기본 글꼴 크기를 16px로 지정했습니다.

그래서 body-tag에 font-size : 100 %를 설정하면 황금색이됩니다.

여기 좋은 나는 당신의 기본 크기에서 글꼴 크기를 계산하기 위해 사용하는 사이트 : 설정 탭에서

http://riddle.pl/emcalc/

단순히 16px로 변경하고 사용자가 설정입니다.

Answer 2

정확하고 @Billy Moat도 맞습니다.

HTML 요소에서 16px 값을 명시 적으로 선언하면 아무 것도 얻지 못합니다. 브라우저는 어쨌든 그렇게하는 경향이 있습니다.

또 다른 속임수는 "62.5 %"트릭입니다.

당신은 선언하는 경우 : EM 픽셀 측정을 깔끔하게 그지도의에

이

body { font-size: 62.5% } 

당신은 더 선언을 할 수 있습니다. 예 :

h1 { font-size: 3em; /* equals 30px */ } 
h2 { font-size: 2.4em; /* equals 24px */ } 
.nav { width: 50.5em /* equals 505px */ } 

10/16 = .625이기 때문입니다. 따라서이 트릭을 사용하면 측정 값을 리베이스 할 수 있으며 나중에 16px 기반을 처리 할 때 수학을 수행 할 필요가 없습니다.

유일한 방법은 요소의 글꼴 크기를 선언하면 모든 자식 요소가 해당 부모 값을 기준으로 em 값을 가져야한다는 것입니다. 이는 모든 상대 측정 단위에 해당됩니다.