В CSS cуществуют разные единицы измерения длины, специфичные для конкретных свойств CSS, однако некоторые из них универсальны и могут использоваться со многими свойствами, такими как width, margin, padding, font-size и др., поэтому с ними стоит познакомиться поближе.
Длина - это числовое значение с указанием единицы измерения, например, 10px, 2em.
Пример
Определим различные значения длины, используя единицы измерения px (пиксели):
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
Пробелы между числовым значением и символами единиц измерения не допустимы. Если значение равно нулю, то нет необходимости указывать единицы измерения. Например, если вы хотите полностью убрать рамку вкруг элемента, то можно просто определить border: 0;.
Для некоторых свойств CSS допустимо использование отрицательных значений длины.
Существует два типа единиц измерения длины: абсолютные и относительные.
Абсолютные единицы
Абсолютные единицы являются фиксированными и элементы со значениями длины, заданными в этих единицах, будут всегда иметь указанный размер.
Абсолютные единицы измерения использовать не рекомендуется, так как размеры экранов устройств очень сильно различаются. Тем не менее, если размеры устройства вывода известны заранее, то данные значения длины вполне допустимы.
| Единицы измерения | Описание |
|---|---|
| cm | сантиметры |
| mm | миллиметры |
| in | дюймы (1in = 96px = 2.54cm) |
| px | пиксели (1px = 1/96 от 1in) |
| pt | пункты (1pt = 1/72 от 1in) |
| pc | пики (1pc = 12 pt) |
Пиксели (px) являются относительными единицами измерения по отношению к устройству вывода. Для устройств с низким разрешением 1px равен одному пикселю вывода (точка) на дисплей. Для принтеров и экранов с большим разрешением 1px соотносится с несколькими пикселями-точками вывода.
Относительные единицы
Относительные единицы определяют значения длины, которые динамически соотносятся с другими свойствами измерения длины. Относительные единицы измерения гораздо лучше масштабируются на разных устройствах вывода.
| Единицы измерения | Описание |
|---|---|
| em | Значение относительно размера шрифта элемента (2em означает, что размер в 2 раза больше размера текущего шрифта) |
| ex | Значение относительно высоты текущего шрифта (используется редко) |
| ch | Значение относительно ширины символа "0" (ноль) |
| rem | Значение относительно размера шрифта корневого элемента |
| vw | Эквивалентно 1% от ширины окна просмотра |
| vh | Эквивалентно 1% от высоты окна просмотра |
| vmin | Эквивалентно 1% от меньшего размера ширины или высоты окна просмотра |
| vmax | Эквивалентно 1% от большего размера ширины или высоты окна просмотра |
| % | Значение относительно родительского элемента |
Единицы em и rem хорошо подходят для создания отлично масштабируемого макета веб-страницы.
Окно просмотра - это фактически окно браузера. Если окно просмотра в ширину 50cm, то 1vw = 0.5cm.
Веб-страница не должна быть статичной и абсолютно усредненной. Она должна быть гибкой. Это означает, что пользователь должен иметь возможность смотреть ее, как ему заблагорассудится, что особенно касается размеров шрифтов и экрана.
В связи с этим считается, что гораздо более правильно использовать em, rem или % в качестве единиц измерения размеров шрифтов (и может быть даже высоты и ширины), чем px, которые означают неизменяемый размер текста в большинстве браузеров и должны использоваться достаточно редко (например, для определения размера рамок элементов).
