Единицы CSS
Единицы CSS
CSS имеет несколько различных единиц для выражения длины.
Многие свойства CSS принимают значения «длины», такие как width, margin, padding,
font-sizeи т. д.
Длина — это число, за которым следует единица измерения длины, например 10px,
2em, и т. д.
Пример
Установите разные значения длины, используя px (пиксели):
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
Примечание. Между числом и единицей измерения не должно быть пробела. Однако, если значение равно
0, единицу можно не указывать.
Для некоторых свойств CSS допускается отрицательная длина.
Существует два типа единиц длины: абсолютные и относительные .
Абсолютные длины
Абсолютные единицы длины фиксированы, и длина, выраженная в любой из них, будет отображаться точно как этот размер.
Абсолютные единицы длины не рекомендуются для использования на экране, поскольку размеры экрана сильно различаются. Однако их можно использовать, если известен носитель вывода, например, для макета печати.
| Unit | Description |
|---|---|
| cm | centimeters |
| mm | millimeters |
| in | inches (1in = 96px = 2.54cm) |
| px * | pixels (1px = 1/96th of 1in) |
| pt | points (1pt = 1/72 of 1in) |
| pc | picas (1pc = 12 pt) |
* Пиксели (px) относятся к устройству просмотра. Для устройств с низким разрешением 1 пиксель — это один пиксель (точка) устройства на дисплее. Для принтеров и экранов с высоким разрешением 1px означает несколько пикселей устройства.
Относительная длина
Относительные единицы длины задают длину относительно другого свойства длины. Единицы относительной длины лучше масштабируются между различными средами рендеринга.
| Unit | Description | |
|---|---|---|
| em | Relative to the font-size of the element (2em means 2 times the size of the current font) | |
| ex | Relative to the x-height of the current font (rarely used) | |
| ch | Relative to width of the "0" (zero) | |
| rem | Relative to font-size of the root element | |
| vw | Relative to 1% of the width of the viewport* | |
| vh | Relative to 1% of the height of the viewport* | |
| vmin | Relative to 1% of viewport's* smaller dimension | |
| vmax | Relative to 1% of viewport's* larger dimension | |
| % | Relative to the parent element |
Совет. Единицы em и rem удобны для создания отлично масштабируемого макета!
* Viewport = размер окна браузера. Если окно просмотра имеет ширину 50 см, 1vw = 0,5 см.
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает единицу измерения длины.
| 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 | 12.0 | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | 16.0 | 19.0 | 7.0 | 20.0 |