HTML/CSS: Единицы измерения

На протяжении всего курса, в качестве единиц измерения, использовались пиксели — наименьший элемент экрана, который выводит цвет. Множество пикселей (а в экране их много) формируют картинку, на которую вы и смотрите. Они использовались для указания размера шрифта, высоты и ширины элемента, внутренних и внешних отступов, межстрочного интервала и так далее.

Пикcели являются абсолютной единицей измерения в CSS. Что же это значит? Это значит, что вне зависимости от размера экрана значение, указанное в пикселях, сохранится. Если указан отступ в 30 пикселей, то он будет таким на телефоне, на телевизоре с диагональю в 102 дюйма и на домашней микроволновке.

С одной стороны это хорошо, ведь можно быть уверенным в том, что на разных устройствах все размеры сохранятся. В этом же заключается и проблема. Представьте себе текст с размером шрифта 12 пикселей. Он будет нормально читаться на среднестатистическом экране, но его использование на телевизоре или смартфоне приведёт к тому, что текст будет слишком маленьким для комфортного чтения, потому что устройства имеют разные размеры экранов. Если экран имеет всего 50 пикселей, то такой текст станет невероятно большим, так как займёт большую часть экрана

Помимо пикселей существуют и другие абсолютные единицы измерения:

• сантиметры
• миллиметры
• дюймы
• пункты

Хоть они нечасто используются, но могут быть полезны при вёрстке страницы для печати. На сайтах используются только пиксели.

В противовес абсолютным единицам измерения существуют относительные. По их названию понятно, что размер такого элемента не фиксируется, а высчитывается относительно чего-то. В случае с интернет-страницами этим «чего-то» является размер шрифта. Почему именно шрифт? Представьте, что вы, как пользователь, увеличиваете размер шрифта на сайте для собственного удобства. Если отступы, ширина, высота не будет привязана к размеру текста, то такой текст будет выходить за пределы блока. А текст — основа любой страницы в интернете.

Одной из относительных единиц измерения являются проценты. Они считаются от размера шрифта родительского элемента, то есть элемента, внутри которого находятся. Например,

<section class="news">
  <h2>Новости</h2>
</section>

.news {
  font-size: 20px;
}

.news h2 {
  font-size: 200%;
}

Какого размера будет заголовок второго уровня? Правильный ответ: 40px, так как для секции news установлен размер шрифта в 20px. Относительно этого размера и высчитывалось значение 200%. Здесь неважно, какие теги есть ещё, в каких обёртках лежат эти новости — размер считается от значения font-size элемента news.

Но важно помнить, что font-size — наследуемое свойство. Если оно явно не указано у элемента news в нашем примере, то, для него, будет установлено значение font-size родителя. Расширим пример:

<main>
  <section class="news">
    <h2>Новости</h2>
  </section>
</main>

main {
  font-size: 16px;
}

h2 {
  font-size: 200%;
}

Какой размер у заголовка второго уровня? Правильный ответ: 32px. Если построить логическую цепочку размеров шрифта, то она выглядит так:

• У элемента <main> размер шрифта установлен в значение 16px
• У элемента с классом news нет отдельного указания размера шрифта, поэтому оно наследуется от <main>, то есть тоже 16px
• У заголовка второго уровня размер шрифта 200%. Значение устанавливается относительно размера шрифта родителя, то есть блока с классом .news. Итого получается 16px * 2 = 32px

Существует ещё несколько основных относительных единиц измерения:

1. em. определяется относительно размера шрифта у родительского элемента, т.е. 1.5em будет на 50% больше базового вычисленного размера шрифта родителя. Очень похоже на использование процентов, только указывается немного по другому
2. rem. определяется относительно размера шрифта у корневого элемента, т.е. у тега html (значение по-умолчанию 16px)

Задание

Добавьте <div> с классом header. Установите размер шрифта в 22px. Внутрь <div> вложите параграф с классом offer и установите размер шрифта в 200%. Стили запишите в теге <style>

Полезное

• С помощью относительных единиц можно управлять не только размером шрифта, но и остальными свойствами, которые в качестве значения принимают число и единицу измерения