Для задания размеров различных элементов в CSS используются абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройства вывода, а относительные единицы определяют размер элемента относительно значения другого размера.
Относительные единицы
Относительные единицы обычно используют для работы с текстом. В табл. 1 перечислены основные относительные единицы.
Табл. 1. Относительные единицы измерения
| Единица |
Описание |
| em |
Размер шрифта текущего элемента |
| ex |
Высота символа x |
| ch |
Ширина символа 0 текущего элемента |
| rem |
Размер шрифта корневого элемента |
Единица em это изменяемое значение, которое зависит от размера шрифта текущего элемента (размер устанавливается через стилевое свойство font-size). В каждом браузере заложен размер текста, применяемый в том случае, когда этот размер явно не задан. Поэтому изначально 1em равен размеру шрифта, заданного в браузере по умолчанию или размеру шрифта родительского элемента. Процентная запись идентична em, в том смысле, что значения 1em и 100% равны.
Единица ex определяется как высота символа «x» в нижнем регистре. На ex распространяются те же правила, что и для em, а именно, он привязан к размеру шрифта, заданного в браузере по умолчанию, или к размеру шрифта родительского элемента.
Единица ch равна ширине символа «0» для текущего элемента и подобно em зависит от размера шрифта.
Разница между em и rem следующая. em зависит от размера шрифта родителя элемента и меняется вместе с ним, а rem привязан к корневому элементу, т. е. размеру шрифта заданного для элемента html.
Также есть группа относительных единиц привязанных к размеру области просмотра браузера. В табл. 2 показан их список с описанием.
Табл. 2. Относительные единицы измерения
| Единица |
Описание |
| vw |
1% от ширины области просмотра |
| vh |
1% от высоты области просмотра |
| vmin |
1% от меньшего значения из ширины и высоты области просмотра |
| vmax |
Определяется, что больше, значение ширины или высоты области просмотра и от него вычисляется 1% |
Абсолютные единицы
Абсолютные единицы представляют собой физические размеры — дюймы, сантиметры, миллиметры, пункты, пики, а также пиксели. Для устройств с низким dpi (количество точек приходящихся на один дюйм, определяет плотность точек) привязка идёт к пикселю. В этом случае один дюйм равен 96 пикселям. Очевидно, что реальный дюйм не будет совпадать с дюймом на таком устройстве. На устройствах с высоким dpi реальный дюйм совпадает с дюймом на экране, поэтому размер пикселя вычисляется как 1/96 от дюйма. В табл. 3 перечислены основные абсолютные единицы.
Табл. 3. Абсолютные единицы измерения
| Единица |
Описание |
| px |
Пиксель |
| in |
Дюйм (1 дюйм равен 2,54 см) |
| cm |
Сантиметр |
| mm |
Миллиметр |
| pt |
Пункт (1 пункт равен 1/72 дюйма) |
| pc |
Пика (1 пика равна 12 пунктам) |
Пример
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Относительные единицы</title>
<style>
h1 { font-size: 30px; }
p { font-size: 1.5em; }
</style>
</head>
<body>
<h1>Заголовок размером 30 пикселей</h1>
<p>Размер текста 1.5 em</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Абсолютные единицы</title>
<style>
h1 { font-size: 24pt; }
p { margin-left: 30mm; }
</style>
</head>
<body>
<h1>Заголовок размером 24 пункта</h1>
<p>Сдвиг текста вправо на 30 миллиметров</p>
</body>
</html>
Примечание
При установке размеров обязательно указывайте единицы измерения, например width: 30px. В противном случае браузер не сможет показать желаемый результат, поскольку не понимает, какой размер вам требуется. Единицы не добавляются только при нулевом значении (margin: 0).
Internet Explorer поддерживает единицу vm вместо vmin.
Спецификация
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
|
|
|
|
|
|
|
| px, in, cm, mm, pt, pc, em, ex |
3 |
12 |
1 |
3.5 |
1 |
1 |
| ch |
9 |
12 |
27 |
20 |
7 |
1 |
| rem |
9 |
12 |
4 |
11.6 |
4.1 |
3.6 |
| vw, vh |
9 |
12 |
20 |
20 |
6 |
19 |
| vmax |
|
16 |
26 |
15 |
6.1 |
19 |
| vmin |
9 |
12 |
20 |
15 |
6 |
19 |
|
|
|
|
|
| px, in, cm, mm, pt, pc, em, ex |
|
|
|
|
| ch |
4.4 |
2 |
37 |
7.1.1 |
| rem |
2.1 |
2 |
12 |
4 |
| vw, vh |
2.1 |
19 |
37 |
6 |
| vmax |
4.4 |
19 |
37 |
6.1 |
| vmin |
2.1 |
19 |
37 |
6 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.