CSS Units
Единицы CSS
CSS имеет несколько различных единиц для выражения длины.
Многие свойства CSS принимают значения "Length", такие как ширина, отступ, отступ, размер шрифта, ширина границы и т.д.
Длина — это число, за которым следует единица длины, например 10px, 2em и т.д.
Между номером и устройством не может быть пробела. Однако если значение равно 0, единицу можно опустить.
Для некоторых свойств CSS допускается отрицательная длина.
Существует два типа единиц длины: абсолютный и относительный.
Абсолютные длины
Абсолютные единицы длины фиксированы, а длина, выраженная в любом из них, будет выглядеть точно так же, как и размер.
Абсолютные единицы длины не рекомендуются для использования на экране, так как размеры экрана меняются так сильно. Однако их можно использовать, если известен выходной носитель, например, для макета печати.
| Unit | Описание |
|---|---|
| cm | Сантиметры |
| mm | Миллиметры |
| in | Дюймов (1in = 96px = 2.54cm) |
| px * | Пикселей (1px = 1/96th of 1in) |
| pt | Точки (1pt = 1/72 of 1in) |
| pc | Пики (1pc = 12 pt) |
* Пикселы (px) относительно устройства просмотра. Для устройств с низким разрешением 1px является одним пиксель устройства (точка) дисплея. Для принтеров и экранов с высоким разрешением 1px подразумевает несколько пикселей устройства.
Относительные длины
Единицы измерения относительной длины указывают длину относительно другого свойства Length. Относительная длина единиц лучше масштабируется между различными носителями визуализации.
| Unit | Описание | |
|---|---|---|
| em | Относительно размера шрифта элемента (2em означает 2 раза размер текущего шрифта) | |
| ex | Относительно x-высоты текущего шрифта (редко используется) | |
| ch | Относительно ширины "0" (ноль) | |
| rem | Относительно размера шрифта корневого элемента | |
| vw | Относительно 1% ширины видового экрана * | |
| vh | Относительно 1% высоты видового экрана * | |
| vmin | Относительно 1% меньшего размера видового экрана | |
| vmax | Относительно 1% размера видового экрана * | |
| % | Относительно родительского элемента |
Tip: The em and rem units are practical in creating perfectly
scalable layout!
* Viewport = the browser window size. If the viewport is 50cm
wide, 1vw = 0.5cm.
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает единицу длины.
| Length Unit | |||||
|---|---|---|---|---|---|
| em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
| ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
| rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
| vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
| vmin | 20.0 | 9.0* | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | Не поддерживается | 19.0 | 7.0 | 20.0 |
Примечание: Internet Explorer 9 поддерживает VMIN с нестандартным именем: VM.