Наследование свойств css на основе длины в единице rem от корневого элемента html

Я знаю, что единица rem css является относительной единицей, которая используется для получения размеров шрифта из корневого элемента, т.е. html.

Мой вопрос: как свойства css на основе длины, такие как ширина, высота, отступы, поля, если они указаны в rem, для любого элемента, полученного из элемента html.

Например:

<html class="basicStyle">
<body> 
<div id="view">This is some content</div>
</body>
</html>

Стиль:

.basicStyle{width:500px; font-size:20px}
#view{width:3rem; font-size:2rem}

Если я попробую это в хроме, ширина #view div должна быть 3 * 500 пикселей = 1500 пикселей. Однако это не так.

Я хочу знать, указываем ли мы ширину или отступ элемента в rem - из какого элемента и как он рассчитывается - чтобы получить вычисленную ширину.

Любая документация тоже приветствуется.

Спасибо.


html css units-of-measurement width
person Probosckie    schedule 10.09.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Единица rem равна значению font-size в корневом элементе:

rem unit
Равен вычисляемому значению размера шрифта в корневом элементе. Когда указано в свойстве font-size корневого элемента, единицы rem относятся к начальному значению свойства.

Относительная длина шрифта: единицы em, ex, ch, rem (http://www.w3.org/TR/css3-values/#font-relative-lengths)

В этом случае единица rem будет равна 20px, так как это font-size, установленное в .basicStyle.

Если вы используете rem для вычисления width элемента, оно будет основано не на width корневого элемента, а на font-size. Таким образом, в вашем примере #view будет иметь результирующее width из 3 * 20 = 60px.

html {
  font-size: 20px;
  width: 500px;
}
#view {
  width: 3rem;
}
<div id="view">This is some content. If you inspect it the width will be 60px.</div>

person Hidden Hobbes    schedule 10.09.2015
comment
Благодарю. очень полезно. Так изменяется ли размер шрифта, если корневой элемент html изменяется, когда я изменяю размер окна просмотра или использую другое устройство? - person Probosckie; 10.09.2015