Единицы измерения

Темы

• Относительные и абсолютные единицы измерения
• px, %, vh, vw, em, rem

• px - абсолютная единица измерения
• % - относительная, рассчитывается относительно родителя
• vw - viewport width, относительная, рассчитывается относительно viewport
• vh - viewport height, относительная, рассчитывается относительно viewport
• em - относительная, рассчитывается относительно родителя (берет значение font-size)
• rem - root em, относительная, рассчитывается относительно html (берет значение font-size)

Примеры

Пример #1. Задание у блока 100% ширины и высоты (в процентах)

html, body {
	height: 100%;
}
div {
	width: 100%;
	height: 100%;
}

Пример #2. Задание у блока 100% ширины и высоты (в vw и vh)

div {
	width: 100vw;
	height: 100vh;
}

Единица измерения em

<p>Текст абзаца</p>

<div class="container">
	<div class="item1">Текст для item1</div>
	<div class="item2">Текст для item2</div>
</div>

body {
	font-size: 20px;
}
.container {
	font-size: 2em;
}
.item1 {
	font-size: 2em;
}
.item2 {
	font-size: 1em;
}

Единица измерения rem

• rem берется от html

<p>Текст абзаца</p>

<div class="container">
    <div class="item1">Текст для item1</div>
    <div class="item2">Текст для item2</div>
</div>

html, body {
	font-size: 20px;
}
.container {
	font-size: 2rem;
}
.item1 {
	font-size: 2rem;
}
.item2 {
	font-size: 1rem;
}