Абсолютные единицы
Измеряются в точных (абсолютных) значениях:
Дюйм пришел из английской системы мер, пика и поинт - из типографики, сантиметр и миллиметр - из метрической системы мер. И только пиксель пришел из веба. Однако размер пикселя, который используется в верстке, отличается от обычного.
На практике обычно используются пиксели, другие единицы измерений - крайне редко. Например, сантиметр и миллиметр понадобятся, если на сайте есть элемент, который должен распечатываться в строгом размере: бейдж для выставки или почтовый адрес, который вкладывают в карман конверта. Подобные задачи могут встретиться пару раз в жизни.
Относительные единицы
Процент берется от различных свойств. 1% всегда равен 1/100 родительского элемента.
Viewport - область просмотра, т.е. та часть окна браузера, которая доступна пользователю. У браузера есть техническая часть: адресная строка, открытые вкладки, виджеты - они не входят. Но в viewport входят полосы прокрутки.
1vw = 1/100 ширины окна браузера
1vh = 1/100 высоты окна браузера
1vmin = меньшее из значений 1vw и 1vh
1vmax = большее из значений 1vw и 1vh
Viewport помогает добиться масштабируемости текста. Чем больше экран, тем более крупный шрифт будет показываться. Однако может случиться ситуация, когда шрифт станет слишком мелким и нечитаемым. Чтобы этого избежать, применяйте функцию calc(). Поставьте базовый размер шрифта, допустим, 12px, и добавьте значение vw:
calc(12px+0.5vw)
Тогда текст станет более динамичным и предсказуемым. Если не хотите использовать calc, работайте с препроцессорами.
Шрифтозависимые единицы
1em = размер родительского элемента
1rem = размер шрифта корневого элемента
1ex = высота символа X
1ch = ширина символа 0
Единицы измерения привязаны к шрифту. Они помогают связать размер шрифта с размерами блоков и отступов. При смене семейства шрифта размеры, установленные через ex и ch, меняются. На практике ex и ch используются редко. Основные используемые единицы - em и rem. Если em не задан, берется значения по умолчанию, установленное в большинстве браузеров - 16px. Единица rem считается от базового значения, а em - от родителя.
Использование rem помогает изменять шрифт всего сайта. Это очень удобно при верстке адаптивных страниц. Задавайте размеры шрифта для каждого устройства отдельно. Например, десктоп-версия - 16px, планшеты - 12px, смартфоны - 10px. На экране устройства шрифт будет отображаться в зависимости от присвоенного значения.
Используйте em и rem, когда дизайн построен на точных пропорциях и важны размеры отступов, блоков и шрифтов. Если сверстать полностью на em и rem, изменение размера шрифта автоматически пропорционально скорректирует остальные элементы. Дизайн останется гармоничным, а вам нужно будет поменять только одну строчку кода.
Что использовать?
Выбор единиц зависит от задач проекта, поэтому принимайте отдельное решение в каждом конкретном случае. На ресурсах, откуда пользователи распечатывают материалы, используйте pt или pc. Если при печати нужны точные размеры, задавайте cm и mm. Для пропорциональных дизайнов, привязанных к размерам друг друга, берите em и rem. Для мультимедийных и резиновых форматов задавайте в процентах или через viewport.
Основное правило - подбирайте единицы измерения, наиболее простые в поддержке данного проекта.
Запомнить