CSS Длины
Справочник CSS длин
CSS имеет несколько различных единиц для выражения длины.
Многие свойства CSS принимают значения "length", такие как width, margin, padding, font-size, border-width, и т.д.
Length - это число, за которым следует единица длины, например 10px, 2еm и т. д.
Между числом и единицей не может быть пробелов. Однако, если значение 0, единица измерения может быть опущена.
Для некоторых свойств CSS допускаются отрицательные длины.
Существует два типа единиц длины: абсолютная и относительная.
Абсолютная длина
Единицы абсолютной длины являются фиксированными, и длина, выраженная в любом из них, будет отображаться как именно этот размер.
Абсолютные единицы длины не рекомендуется использовать на экране, потому что размеры экрана сильно различаются. Однако их можно использовать, если известна выходная среда, например что касается печатной верстки.
| Длина | Описание |
|---|---|
| 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. Относительные единицы измерения длины лучше масштабируются между различными средами визуализаци.
| Длина | Описание | |
|---|---|---|
| em | Относительно font-size элемента (2em означает в 2 раза размер текущего шрифта) | Код |
| ex | Относительно x-height текущего шрифта (используется редко) | Код |
| ch | Относительно ширины "0" (ноль) | Код |
| rem | Относительно font-size корневого элемента | Код |
| vw | Относительно 1% ширины окна просмотра Viewport* | Код |
| vh | Относительно 1% высоты окна просмотра Viewport* | Код |
| vmin | Относительно 1% видовых экранов Viewport* меньший размер | Код |
| vmax | Относительно 1% видовых экранов Viewport* больший размер | Код |
| % | Относительно родительского элемента | Код |
Совет: Длины em и rem практически в создавать совершенно масштабируемый макет!< br>* Viewport = размер окна браузера. Если окно просмотра 50cm широкий, 1vw = 0.5cm.
Поддержка Браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает единицы длины.
| Единицы Длины | |||||
|---|---|---|---|---|---|
| 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.
