units
Абсолютные| единицы | комментарий |
|---|---|
| px | пиксель экрана |
| pc | пики ( 1pc = 12pt ) |
| pt | точки |
Размер точки ( pt ) зависит от разрешения экрана
| Разрешение | 1pt | ширина ( px ) | высота ( px ) |
|---|---|---|---|
| 1x | 1px | 1 | 1 |
| 2x | 4px | 2 | 2 |
| 3x | 9px | 3 | 3 |
| ... | ... | ... | ... |
При разрешении 1x одна точка равна 1 пикселю ( 1pt = 1px )
При разрешении 2x 1pt = 4px, потому что ширина 2px умножается на высоту 2px
При разрешении 3x 1pt = 9px ( 3px умножается на 3px )
... и так далее
| единицы | комментарий |
|---|---|
| % | процент от размеров родительского блока или viewport |
| em | измерение относительно высоты базового шрифта |
| rem | rem — корневой em (Root Em) относительно размера шрифта элемента <html>( по умолчанию 16px ) |
| vh | 1vh = 1% высоты viewport |
| vw | 1vw = 1% ширины viewport |
| vmin | 1vmin = минимум ( 1vh, 1vw ) |
body { margin: 0; }
div {
width: 50vw;
height: 50vh;
margin: 5vh 25vw;
background-color: #ffaa0090;
}
figure {
width: 30rem;
height: 30rem;
margin: -10rem 10rem;
background-color: #ff00ff90;
}<body>
<div></div>
<figure></figure>
</body> |
|---|
body { font-size: 16pt; }
p { font-size: 0.8em; }
h1 { font-size: 1.2em; }
h2 { font-size: 1em; }
div {
width: 25em;
height: 25em;
background-color: #ffaa0090;
}<body>
<h1>em</h1>
<h2>относительный размер</h2>
<p>Абзац текста ( параграф )</p>
<div></div>
1em эквивалентно размеру шрифта по умолчанию, то есть 16pt<br>
1.2em = 19.2pt<br>
0.8em = 12.8pt<br>
2em = 32pt
</body>Преимущество относительных единиц измерения rem и em заключается в том, что можно задавать внутренние и внешние отступы относительно размеров шрифта
При использовании rem все отступы будут пропорциональны базовому размеру шрифта ( заданному для корневого элемента ), т.е. отступы будут единообразны по всей странице
Если же нужно создать модуль, в котором будет свой собственный масштаб, то мы устанавливаем размер шрифта для контейнера ( родительского элемента ), а все остальные размеры задаем с помощью em
main {
padding: 2rem;
font-family: Arial;
line-height: 1rem;
}
h1 {
font-size: 2rem;
padding: 2rem;
}
h2 {
font-size: 1.5rem;
padding: 1rem;
}
h3 {
font-size: 1.2rem;
padding: 0.5rem;
}
section {
font-size: 12px;
padding: 2em;
line-height: 3em;
}
section * {
font-size: 1.8em;
padding: 1.2em;
text-align: justify;
}<body>
<main>
<h1>Пример</h1>
<section>
<p>
Изменяем только один размер - размер шрифта элемента section
</p>
<p>
При этом размеры отступов и высота строки автоматически пересчитываются,
поскольку заданы в em
</p>
<p>
Если же мы меняем размер шрифта корневого элемента ( html ),
то автоматически будут пересчитаны размеры шрифтов и
отступы для заголовков h1, h2, h3</p>
</section>
<h2>Заголовок второго уровня</h2>
<section>
<p>
Вставьте сюда любой текст...
</p>
<p>
Вставьте сюда любой текст...
</p>
<p>
Вставьте сюда любой текст...
</p>
</section>
<h3>Заголовок третьего уровня</h3>
<section>
<p>
Вставьте сюда любой текст...
</p>
<p>
Вставьте сюда любой текст...
</p>
<p>
Вставьте сюда любой текст...
</p>
</section>
</main>
</body> |
|---|
 4 |
|---|
Можно посмотреть в песочнице
Мы изменяем только размер шрифта корневого элемента ( html )
Его стартовое значение 8px
Размер шрифта элемента section задается относительно размера шрифта корневого элемента:
font-size: 1.2rem;Для всех потомков элемента section ( кроме заголовков h1, h2, h3 и элемента em ) размер внутренних отступов устанавливается также относительно размера шрифта корневого элемента:
padding: 3rem;Для заголовков h1, h2, h3 высота строки и размер внутренних отступов слева и справа также устанавливается относительно размера шрифта корневого элемента:
line-height: 1.5rem;
padding: 1.5em 3rem;Это гарантирует приличный вид отступов, чтобы текст на странице не сдвигался влево,
если шрифт контейнера ( section ) будет меньше шрифта корневого элемента
Обратите внимание, что размер отступов сверху и снизу для заголовков h1, h2, h3 устанавливается относительно размера шрифта родительского контейнера
 |
|---|
Всемирная паутина
Пример
Flexbox Froggy
