58
CSS를
h1 { font-size: 2em; }
.smaller { font-size: 0.5em; }
html로
<h1>Hi, I am a <span class="smaller">toad</span></h1>
단어 "두꺼비"0.5 배 16px 것인가 (브라우저의 표준 글꼴 크기) 또는 0.5 배 2em (h1의 글꼴 크기)이됩니까?
A
답변
55
와 같음 사용 된 요소의 'font-size'속성 값. 상속은 문서 트리를 실행합니다.
귀하의 질문에 대답하려면, 그것은 h1의 부모의 계산 된 글꼴 크기가 무엇이든간에 2 배가되는 2em의 0.5 배가됩니다. phew.
그것은 당신이 width거나 height 등 적용 어떤 요소가 다른 CSS 속성에 em를 사용하는 경우, 예를 들어, width 또는 height, 결과의 계산 font-size 계산되므로주의하는 것도 중요 ...
다음 기사에서는 em 단위의 사용 및 컨텍스트를 다른 의견 자료 및 리소스와 함께 제 의견으로는 잘 설명합니다 ... rem 단위는 어느 정도 사용자의 흥미를 끌 수 있습니다.
- http://www.impressivewebs.com/understanding-em-units-css/
- http://snook.ca/archives/html_and_css/font-size-with-rem
- http://caniuse.com/rem
또한 조금 더 명확한 역할을하는 방법을 보려면이 바이올린을 확인하실 수 있습니다 :
+2
다른 속성과 함께 사용되는 경우 사용되는 요소의 계산 된 'font-size'속성입니다. 'font-size'자체에 사용되면 자체 계산을 위해 * 부모의 계산 된 글꼴 크기를 참조합니다. – BoltClock
+0
현실적으로, 꼭 부모가 아니에요. 예를 들어, 몸체가'font-size'가'16px'로 설정되어 있고, 서로 5 div를 중첩하고 마지막으로 폰트를 가지고 있다면 -size를'2em'으로 설정하면 결과로 계산 된'font-size'는'32px'가됩니다. – Seer
+2
글쎄, 그래. 어느 쪽이든 그것은 당신이 상속이 부모에게서 자식에게로 교리를 실행한다고 말한 이후로 동일합니다. – BoltClock
1
그것은 것 t의 2em. 그는 문맥 속에서 h1 요소를 사용한다.
16px를 기준으로 강제로 적용하려면 h1의 부모를 font-size 16px로 설정해야합니다.
.wrapper {font-size : 16px;} h1 {font-size : 2em; } .smaller {font-size : 0.5em; }이 경우 SO
<div class="wrapper"><h1>Hi, I am a <span class="smaller">toad</span></h1></div>
- 래퍼 16px
- H1의 폰트 크기를 갖는다는 16px
- span.smaller의 2EM의 폰트 사이즈를 가지는 font-을 갖는다 1em의 크기 (h1 (2em의 .5em)에서 상속 된 래퍼)의 크기가
em은 명목상의 컨텍스트로부터의 상대적 측정입니다 현재 글꼴의 M 자 높이.모든 의도에 대해 h1은 32px 크기이고 span.smaller는 16px 크기입니다.
1
상위 요소 픽셀 크기에 따라 다릅니다. 상위 소자의 화소 크기 16px 경우가 32px 동일한 것이다 H1위한 8px와 2em 수 있도록
.5em는 기본 화소의 절반과 동일 할 것이다.
모두는 CSS에서 부모 요소 픽셀 크기를 설정 한 방법에 따라 다릅니다. em unit
3
은 부모 요소의 폰트 크기를 나타내고 font-size 속성 값에 사용되는 경우를 제외하고 소자의 폰트 크기를 나타낸다. 이러한 의미에서, 제시된 경우, 문맥은 부모 요소이다.
제시된 경우, 단어 "toad"의 글꼴 크기는 따라서 h1의 부모 글꼴 크기와 같습니다. 주어진 데이터로부터 특정 값을 유추 할 수 없다.
글꼴 크기를 계산할 때 h1 부모 글꼴 크기는이 구문을 처리 할 때 계산됩니다. 이라고합시다. 먼저 h1의 글꼴 크기가 계산되고 (부모의 글꼴 크기)에 2를 곱한 다음 부모 글꼴 크기에 0.5를 곱한 span 요소의 글꼴 크기가 계산되어 이됩니다. 이론적으로 반올림 오류로 인해 이러한 프로세스에서 최소한의 편차가 발생할 수 있지만 2와 0.5의 곱셈은 컴퓨터에서 정확하다고 가정 할 수 있습니다.
이것은 내 머리를 아프게합니다. – Jefferson
Yikes, 좋은 질문! 내 두뇌가 아파! – evilscary
이 질문이 RWD와 어떻게 관련이 있는지 잘 모르겠습니다. – BoltClock