Каков контекст ЭМ?

в этом примере:

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)?

4 58
semantics html css responsive-design

4 ответа:

все равно вычисляемые значение свойства 'font-size' элемента, на котором он используется. Наследование выполняется вниз по дереву документов.

чтобы ответить на ваш вопрос, это будет в 0,5 раза больше 2em, что, в свою очередь, будет в 2 раза больше вычисленного размера шрифта родителя h1. фух.

также важно отметить, что если вы используете em на других свойствах CSS, например,width или height результат будет вычисляется из вычисленного font-size любого элемента, который вы применяете width или height to и др...

в следующей статье описывается использование и контекст 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/

55

The em unit обозначает размер шрифта элемента, за исключением случаев, когда используется в значении font-size Свойства, где оно обозначает размер шрифта родительского элемента. В этом смысле в представленном случае контекст является родительским элементом.

в представленном случае размер шрифта слова "жаба", таким образом, равен размеру шрифта родителя h1. Никакого конкретного значения можно сделать вывод из приведенных данных.

когда шрифт размеры вычисляется, размер шрифта родителя h1 был вычислен, когда эта конструкция будет рассматриваться; назовем его s. Сначала размер шрифта h1 вычисляется, умножая s (размер шрифта родителя) на 2. Тогда размер шрифта span элемент вычисляется, умножая размер шрифта его родителя на 0,5, что дает s. Теоретически ошибки округления могут вызвать минимальное отклонение в таких процессах, но умножение на 2 и 0,5 можно считать точными в компьютерах.

3

Это будет .5 раз 2em элемента h1 в контексте.

чтобы заставить его быть относительно 16px, вам нужно будет сначала установить родительский элемент h1 на размер шрифта 16px.

.обертка{размер шрифта: 16px;} h1 { размер шрифта: 2em; } .меньше { размер шрифта: 0.5 em;}

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

Так что в данном случае,

  • обертка имеет размер шрифта 16px
  • Н1 имеет шрифт-размер 2ем на 16px и
  • span.меньший имеет размер шрифта 1em (из. обертка наследуется от h1 (.5em из 2em)) 16px

обратите внимание, что em является относительной мерой из контекста, которая номинально основана на высоте M символов в текущем шрифте. Для всех намерений тогда h1 имеет размер 32px и диапазон.меньший имеет размер 16px.

1

это зависит от размера пикселя родительского элемента. Если размер пикселя родительского элемента равен 16px

.5em будет равна половине вашего базового пикселя, так что это будет 8px и 2em для h1 будет равно 32px.

все зависит от того, как вы настроили размер пикселя родительского элемента в вашем CSS.

http://pxtoem.com/

1