em의 컨텍스트는 무엇입니까?

em의 컨텍스트는 무엇입니까?

---

이 예에서 :

CSS

h1 { font-size: 2em; }
.smaller { font-size: 0.5em; }

HTML

<h1>Hi, I am a <span class="smaller">toad</span></h1>

"toad"라는 단어는 0.5 x 16px (브라우저의 표준 글꼴 크기) 또는 0.5 x 2em (h1 글꼴 크기)입니까?

---

사용되는 요소의 'font-size'속성의 계산 된 값 과 동일합니다 . 상속은 문서 트리에서 실행됩니다.

귀하의 질문에 답하려면 2em의 0.5 배가되며, 이는 h1의 부모의 계산 된 글꼴 크기의 2 배가됩니다. 휴 .

그것은 당신이 사용하는 경우주의하는 것도 중요 em다른 CSS 속성에, 예를 들어, width또는 height, 결과가 계산에서 계산됩니다 font-size당신이 적용 어떤 요소의 width나 height등,에 ...

다음 기사는 em다른 읽기 자료 및 리소스와 함께 단원 의 사용과 맥락을 제 생각에 잘 설명합니다 . rem단원도 어느 정도 흥미로울 수 있습니다.

1. http://www.impressivewebs.com/understanding-em-units-css/
2. http://snook.ca/archives/html_and_css/font-size-with-rem
3. http://caniuse.com/rem

이 바이올린이 어떻게 작동하는지 좀 더 명확하게 확인하는 것도 좋습니다.

http://jsfiddle.net/HpJjt/3/

---

em유닛 의 값에 사용되는 경우를 제외하고 소자의 폰트 크기를 나타내고, font-size그 부모 요소의 폰트 크기를 나타내고 속성. 이러한 의미에서 제시된 경우 컨텍스트는 상위 요소입니다.

표시된 경우 "toad"라는 단어의 글꼴 크기는 h1. 주어진 데이터에서 그것에 대한 특정 값을 유추 할 수 없습니다.

글꼴 크기가 계산 h1될 때이 구성이 처리 될 때 의 부모 글꼴 크기가 계산 되었습니다. 그것을 s 라고 부르 자 . 최초의 폰트 사이즈를 h1곱하여 계산 S 나서의 폰트 크기 (2)에 의해 (상위의 폰트 크기)를 span산출 0.5 부모의 폰트 크기를 곱한 요소 계산 들 . 이론적으로 반올림 오류는 이러한 프로세스에서 최소한의 편차를 유발할 수 있지만 컴퓨터에서는 2와 0.5의 곱셈이 정확하다고 가정 할 수 있습니다.

---

문맥 상 h1 요소의 2em의 0.5 배가됩니다.

16px를 기준으로 강제하려면 먼저 h1의 부모를 font-size 16px로 설정해야합니다.

.wrapper {font-size : 16px;} h1 {글꼴 크기 : 2em; } .smaller {글꼴 크기 : 0.5em; }

<div class="wrapper"><h1>Hi, I am a <span class="smaller">toad</span></h1></div>

그래서이 경우에는

• 래퍼의 글꼴 크기는 16px입니다.
• h1의 글꼴 크기는 2em 16px입니다.
• span.smaller의 글꼴 크기는 1em (h1 (2em의 .5em)에서 상속 된 .wrapper)의 16px입니다.

em은 명목상 현재 글꼴의 M 문자 높이를 기반으로하는 컨텍스트의 상대적 측정 값입니다. 모든 인 텐트에 대해 h1의 크기는 32px이고 span.smaller의 크기는 16px입니다.

---

부모 요소 픽셀 크기에 따라 다릅니다. 상위 요소 픽셀 크기가 16px 인 경우

.5em베이스 화소의 절반과 동일한 것 때문일 수 있도록 8px하고 2em(H1)에 대해 동일한 것이다 32px.

그것은 모두 CSS에서 부모 요소 픽셀 크기를 어떻게 설정했는지에 달려 있습니다.

http://pxtoem.com/

참고 URL : https://stackoverflow.com/questions/15431702/what-is-the-context-of-em