Кто-нибудь может объяснить "em относится к размеру шрифта, а% - к родительскому элементу" на примере? - PullRequest
Новая
       11

Кто-нибудь может объяснить "em относится к размеру шрифта, а% - к родительскому элементу" на примере?

1 голос
/ 01 февраля 2010

Кто-нибудь может объяснить "em относится к размеру шрифта, а% - к родительскому элементу" на примере?

Что означает средство относительно размера шрифта и относительно родительского элемента?

Ответы [ 3 ]

1 голос
/ 01 февраля 2010

Посмотрите на этот пример: 

<div id='contain' style='height: 400px'>
  <div style='height: 1.5em'>Test 1</div>

  <div style='height: 50%'>Test 2</div>
</div>

В тесте 1 высота поля составляет 150% от размера текста. Если размер шрифта составляет 10 пикселей, высота составляет 15 пикселей. Во втором примере высота составляет 50% от родительского элемента; в этом случае Тест 2 равен 200px, поскольку #contain равен 400px.

Если я правильно помню, если вы примените процент к размеру шрифта, он будет отображен так же, как em. font-size: 150% совпадает с font-size: 1.5em (я думаю).

Я считаю более полезным использовать em для height или width. Если вы используете его для width, то текст не изменит точки переноса при изменении размера шрифта (когда пользователь меняет размер шрифта). Полезно использовать его, когда ваша страница насыщена текстом, а слишком маленький размер шрифта может сделать страницу слишком широкой. (См. Эту статью на Em Widths ) 

<div style='width: 80em`>Lorem ipsum...</div>
1 голос
/ 01 февраля 2010

Подумайте, определяете ли вы высоту блока внутри другого блока. Если вы укажете высоту в 50%, она будет вдвое меньше высоты, в которой она находится. если вместо этого указать высоту в ems, ее высота будет зависеть от размера буквы m в любом используемом вами шрифте и не будет зависеть от размера чего-либо, кроме текста.

0 голосов
/ 01 февраля 2010

em - типографское измерение - по существу,% от размера шрифта. в то время как %, как вы сказали, относится к родительскому элементу.

так что давайте возьмем: 

body {font-size: 12px;}
p.rel-to-font { font-size: 1.5em;}
<body>
 <p class="rel-to-font"> Some cool text</p>
</body>

в этом примере p.rel-to-font будет иметь font-size, равный 18px. 150% из 12px. 

body,p {font-size: 12px;}
div {font-size: 15px;}
p.rel-to-parent { font-size: 150%;}
p.rel-to-font { font-size: 1.5em;}

<body>
<div>
 <p id="test-1"class="rel-to-parent"> Some cool text</p>
 <p id="test-2" class="rel-to-font"> Some cool text</p>
</div>
<p id="test-3" class="rel-to-font"> Some cool text</p>
<p id="test-4" class="rel-to-parent"> Some cool text</p>
</body>

в этом примере #test-1 будет иметь font-size равным 22,5px, #test-2 будет 18px, #test-3 будет 18px и #test-4 будет 18px.

Мне кажется, что это помогает ... Я не могу придумать хороший пример ... В большинстве случаев % и em обычно работают одинаково - не всегда очевидно, но только большинство время в практических реализациях.

...