Наследование свойств css, основанных на длине, в модуле rem из элемента root html

Я знаю, что единица rem css является относительной единицей, которая используется для получения размеров шрифта из корневого элемента i.e html.Наследование свойств css, основанных на длине, в модуле rem из элемента root 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 * 500px = 1500px - Однако это не так.

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

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

Спасибо.

источник

2015-09-10 Prabhas

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

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

Font-относительная длина: ЕМ, EX, CH, рем единиц (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>

источник

2015-09-10 07:37:26

спасибо. очень полезно. Значит, размер шрифта, если элемент root html изменяется при изменении размера окна просмотра или использовании другого устройства? – Prabhas

Наследование свойств css, основанных на длине, в модуле rem из элемента root html

ответ

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