CSS Единицы
CSS Единицы длины
CSS имеет несколько различных единиц для выражения длины.
Многие свойства CSS принимают значения "длины" такие как width, margin, padding, font-size и т.д.
Length (длина) - это число, за которым следует единица длины, например 10px, 2em и т.д.
Пример
Установите разные значения длины, используя px (пиксели):
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
Примечание: Между числом и единицей не может быть пробела. Однако, если значение равно 0, единицу измерения можно не указывать.
Для некоторых свойств CSS разрешена отрицательная длина.
Существует два типа единиц длины: абсолютная и относительная.
Абсолютные длины
Единицы абсолютной длины являются фиксированными, и длина, выраженная в любом из них, будет отображаться именно как фиксированный размер.
Абсолютные единицы длины не рекомендуются для использования вывода изображения на экране, потому что размеры экранов различных устройств могут сильно отличаться. Однако их можно использовать, если известен выходной носитель, например, для печатного макета (страницы для печати).
| Единица | Описание |
|---|---|
| cm | сантиметры Попробуй |
| mm | миллиметры Попробуй |
| in | дюймы (1 дюйм = 96px = 2.54см) Попробуй |
| px * | пиксели (1px = 1/96th в 1) Попробуй |
| pt | точки (1pt = 1/72 в 1) Попробуй |
| pc | picas (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 | 9.0* | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | Не поддерживается | 19.0 | 7.0 | 20.0 |
