2012-05-06 2 views
11

В CSS em - относительная единица, основанная на размере шрифта документа. Итак, что же такое em, если размер шрифта документа сам измеряется в ems? Предположим, мы говорим:Что такое «em», если размер шрифта документа указан в ems?

<style type = "text/css"> 
body 
{ 
    font-size: 1em; 
} 
</style> 

это так, em теперь рекурсивно. Итак, как это обрабатывается браузером?

W3C docs говорят:

«ет» единица равна расчетному значению «размера шрифта» свойство элемента, на котором она используется. Исключение составляет то, когда «em» встречается в значении самого свойства «font-size», в котором случай относится к размеру шрифта родительского элемента. Для вертикального или горизонтального измерения может использоваться . (Это устройство также иногда называют квадро ширины в типографских текстов.)

Но что, если элемент document.body, поэтому нет родительского элемента?

+1

'em' основан на' шрифта size' данного элемента, или если он установлен на 'шрифта size', то это относительно его родителя. Если вам нужна единица, относящаяся к «font-size» корня документа, это будет «rem». – BoltClock

ответ

23

body не является корневым элементом документа - это очень распространенное заблуждение. Родительский элемент body - html, размер шрифта по умолчанию которого соответствует настройке размера шрифта по умолчанию браузера (обычно 16px).

Это относится даже если вы установите значение font-size в EMS на какbody и html. Так что если вы сделали это:

html, body { font-size: 2em; } 

Тогда, предполагая, что размер шрифта по умолчанию в 16px, как установленные пользователем, html будет иметь размер шрифта 32px (дважды размер шрифта по умолчанию) и body будет иметь размер шрифта от 64px (в два раза от его родителя, html).


Чтобы быть точным, размер шрифта по умолчанию html элемента является the initial value, medium, который в соответствии со спецификацией соответствует предпочтительной размер шрифта по умолчанию, как указано пользователем.

+0

+1 Исключительно хороший ответ. –

+0

Является ли стандартом '16px' по умолчанию определенным стандартом, или это просто значение, за которым следуют большинство (всех?) Браузеров? – Channel72

+0

Это не обязательный стандарт. – BoltClock

-1

Это будет относительный размер шрифта по умолчанию, установленный браузером, который будет указан в физическом размере, например. '10pt'.

0

Значение по умолчанию для браузеров 16px, если родительский элемент не определил его.

см Также в этом: http://pxtoem.com/

Смежные вопросы