Размер
- Содержание
Для задания размеров различных элементов в CSS используются абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройства вывода, а относительные единицы определяют размер элемента относительно значения другого размера.
Относительные единицы
Относительные единицы обычно используют для работы с текстом. В табл. 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 показан их список с описанием.
| Единица | Описание |
|---|---|
| vw | 1% от ширины области просмотра |
| vh | 1% от высоты области просмотра |
| vmin | 1% от меньшего значения из ширины и высоты области просмотра |
| vmax | Определяется, что больше, значение ширины или высоты области просмотра и от него вычисляется 1% |
Абсолютные единицы
Абсолютные единицы представляют собой физические размеры — дюймы, сантиметры, миллиметры, пункты, пики, а также пиксели. Для устройств с низким dpi (количество точек приходящихся на один дюйм, определяет плотность точек) привязка идёт к пикселю. В этом случае один дюйм равен 96 пикселям. Очевидно, что реальный дюйм не будет совпадать с дюймом на таком устройстве. На устройствах с высоким dpi реальный дюйм совпадает с дюймом на экране, поэтому размер пикселя вычисляется как 1/96 от дюйма. В табл. 3 перечислены основные абсолютные единицы.
| Единица | Описание |
|---|---|
| px | Пиксель |
| in | Дюйм (1 дюйм равен 2,54 см) |
| cm | Сантиметр |
| mm | Миллиметр |
| pt | Пункт (1 пункт равен 1/72 дюйма) |
| pc | Пика (1 пика равна 12 пунктам) |
Пример
<!DOCTYPE html>
<html>
<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>
<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.
Спецификация ?
| Спецификация | Статус |
|---|---|
| CSS Values and Units Module Level 3 | Возможная рекомендация |
| CSS Level 2 (Revision 1) | Рекомендация |
| CSS Level 1 | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- 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 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.