CSS Единицы измерения
CSS Единицы измерения
CSS имеет несколько различных единиц для выражения длины.
Многие свойства CSS принимают значения "длины", такие как width, margin, padding, font-size и др.
Длина - это число, за которым следует единица длины, например 10px, 2em и др.
Между числом и единицей не должно быть пробела. Однако, если значение равно 0, единица может быть опущена.
Для некоторых свойств CSS допустимы отрицательные длины.
Существует два типа единиц длины: абсолютная и относительная.
Абсолютные длины
Единицы абсолютной длины являются фиксированными, и длина, выраженная в любом из них, будет отображаться именно как этот размер.
Абсолютные единицы длины не рекомендуются для использования на экране, потому что размеры экрана сильно различаются. Однако их можно использовать, если известен выходной носитель, например, для макета печати.
| Единица измерения | Описание |
|---|---|
| cm | сантиметры Попробуй это |
| mm | миллиметры Попробуй это |
| in | дюймы (1дюйм = 96px = 2.54cm) Попробуй это |
| px * | пиксели (1px = 1/96th of 1in) Попробуй это |
| pt | точки (1pt = 1/72 1дюйма) Попробуй это |
| pc | пики (1pc = 12 pt) Попробуй это |
* Пиксели (px) относительно устройства просмотра. Для устройств с низким разрешением 1 пиксель - это один пиксель (точка) устройства на дисплее. Для принтеров и экранов с высоким разрешением 1px подразумевает несколько пикселей устройства.
Относительные длины
Единицы относительной длины определяют длину относительно другого свойства длины. Относительные единицы длины лучше масштабируются между различными средами рендеринга.
| Единица измерения | Описание | |
|---|---|---|
| em | Относительно размера шрифта элемента (2em означает 2-кратный размер текущего шрифта) | Попробуй это |
| ex | Относительно x-высоты текущего шрифта (редко используется) | Попробуй это |
| ch | Относительно ширины "0" (ноль) | Попробуй это |
| rem | Относительно размера шрифта корневого элемента | Попробуй это |
| vw | Относительно 1% ширины области просмотра* | Попробуй это |
| vh | Относительно 1% высоты окна просмотра* | Попробуй это |
| vmin | Относительно 1% *меньшего размера области просмотра | Попробуй это |
| vmax | Относительно 1% *большего размера области просмотра | Попробуй это |
| % | Относительно родительского элемента | Попробуй это |
Совет: Единицы em и rem удобны в создании идеально масштабируемого макета!
*Viewport = размер окна браузера. Если ширина окна составляет 50 см, 1vw = 0.5 см.
Поддержка браузерами
Числа в таблице указывают первую версию браузера, которая полностью поддерживает единицу длины.
| Единица длины | |||||
|---|---|---|---|---|---|
| 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 | 12.0 | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | 16.0 | 19.0 | 7.0 | 20.0 |
