CSS Еденицы измерений
Еденицы измерений
CSS имеет несколько различных единиц для выражения длины.
Многие свойства CSS принимают значения "Длины", такие как ширина, поля, отступы, размер шрифта, ширина границ, и т.д.
Длина- это число, за которым следует единица измерения, например 10px, 2em и т.д.
Пример
Установите разные значения длины, используя px (пиксели):
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
Примечание: Между числом и единицей измерения не может быть пробела. Однако, если значение равно 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 подразумевает несколько пикселей устройства.
Относительная длина
Единицы относительной длины задают длину относительно другого свойства длины. Относительные единицы измерения длины лучше масштабируются между различными средствами визуализации.
| Еденица | Описание | |
|---|---|---|
| em | Относительно элемента font-size (2em означает в 2 раза размер текущего шрифта) | Попробовать |
| ex | Относительно x-height текущего шрифта (используется редко) | Попробовать |
| ch | Относительно ширины "0" (нуль) | Попробовать |
| rem | Относительно font-size корневого элемента | Попробовать |
| vw | Относительно 1% ширины окна просмотра* | Попробовать |
| vh | Относительно 1% высоты окна просмотра* | Попробовать |
| vmin | Относительно 1% видовых экранов* меньших размеров | Попробовать |
| vmax | Относительно 1% видовых экранов* больших размеров | Попробовать |
| % | Относительно родительского элемента. | Попробовать |
Совет: Еденицы em и rem практичны в создании идеально масштабируемого макета!
* Просмотр = размер окна браузера. Если окно просмотра имеет ширину 50 см, 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.