319 lines
18 KiB
Markdown
319 lines
18 KiB
Markdown
# Единицы измерения: "px", "em", "rem" и другие
|
||
|
||
В этом очерке я постараюсь не только рассказать о различных единицах измерения, но и построить общую картину -- что и когда выбирать.
|
||
|
||
[cut]
|
||
## Пиксели: px
|
||
|
||
Пиксель `px` -- это самая базовая, абсолютная и окончательная единица измерения.
|
||
|
||
Количество пикселей задаётся в настроках [разрешения экрана](http://ru.wikipedia.org/wiki/%D0%A0%D0%B0%D0%B7%D1%80%D0%B5%D1%88%D0%B5%D0%BD%D0%B8%D0%B5_(%D0%BA%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80%D0%BD%D0%B0%D1%8F_%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B0), один `px` -- это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.
|
||
|
||
Пиксели могут быть дробными, например размер можно задать в `16.5px`. Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в `100px`, его нужно разделить на три части -- волей-неволей появляются `33.333...px`. При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.
|
||
|
||
Для мобильных устройств, у которых много пикселей на экране, но сам экран маленький, чтобы обеспечить читаемость, браузер автоматически применяет масштабирование.
|
||
|
||
[compare]
|
||
+Главное достоинство пикселя -- чёткость и понятность
|
||
-Другие единицы измерения -- в некотором смысле "мощнее", они являются относительными и позволяют устанавливать соотношения между различными размерами
|
||
[/compare]
|
||
|
||
|
||
[warn header="Давно на свалке: `mm`, `cm`, `pt`, `pc`"]
|
||
|
||
Существуют также "производные" от пикселя единицы измерения: `mm`, `cm`, `pt` и `pc`, но они давно отправились на свалку истории.
|
||
|
||
Вот, если интересно, их значения:
|
||
<ul>
|
||
<li>`1mm` (мм) = `3.8px`</li>
|
||
<li>`1cm` (см) = `38px`</li>
|
||
<li>`1pt` (типографский пункт) = `4/3 px`</li>
|
||
<li>`1pc` (типографская пика) = `16px`</li>
|
||
</ul>
|
||
Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.
|
||
[/warn]
|
||
|
||
[smart header="Почему сантиметре `cm` содержится ровно 38 пикселей?"]
|
||
В реальной жизни сантиметр -- это эталон длины, одна сотая метра. А [пиксель](http://ru.wikipedia.org/wiki/%D0%9F%D0%B8%D0%BA%D1%81%D0%B5%D0%BB%D1%8C) может быть разным, в зависимости от экрана.
|
||
|
||
Но в формулах выше под пикселем понимается "сферический пиксель в вакууме", точка на "стандартизованном экране", характеристики которого описаны в [спецификации](http://www.w3.org/TR/CSS2/syndata.html#length-units).
|
||
|
||
Поэтому ни о каком соответствии `cm` реальному сантиметру здесь нет и речи. Это полностью синтетическая и производная единица измерения, которая не нужна.
|
||
[/smart]
|
||
|
||
|
||
## Относительно шрифта: em
|
||
|
||
`1em` -- текущий размер шрифта.
|
||
|
||
Можно брать любые пропорции от текущего шрифта: `2em`, `0.5em` и т.п.
|
||
|
||
**Размеры в `em` -- *относительные*, они определяются по текущему контексту.**
|
||
|
||
Например, давайте сравним `px` с `em` на таком примере:
|
||
|
||
```html
|
||
<!--+ autorun height=80 -->
|
||
<div style="font-size:24px">
|
||
Страусы
|
||
<div style="font-size:24px">Живут также в Африке</div>
|
||
</div>
|
||
```
|
||
|
||
`24` пикселей -- и в Африке `24` пикселей, поэтому размер шрифта в `<div>` одинаков.
|
||
|
||
А вот аналогичный пример с `em` вместо `px`:
|
||
|
||
```html
|
||
<!--+ autorun height=120 -->
|
||
<div style="font-size:1.5em">
|
||
Страусы
|
||
<div style="font-size:1.5em">Живут также в Африке</div>
|
||
</div>
|
||
```
|
||
|
||
Так как значение в `em` высчитывается относительно *текущего шрифта*, то вложенная строка в `1.5` раза больше, чем первая.
|
||
|
||
Выходит, размеры, заданные в `em`, будут уменьшаться или увеличиваться вместе со шрифтом. С учётом того, что размер шрифта обычно определяется в родителе, и может быть изменён ровно в одном месте, это бывает очень удобно.
|
||
|
||
[smart header="Что такое размер шрифта?"]
|
||
Что такое "размер шрифта"? Это вовсе не "размер самой большой буквы в нём", как можно было бы подумать.
|
||
|
||
Размер шрифта -- это некоторая "условная единица", которая встроена в шрифт.
|
||
|
||
Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание. Но при этом "хвосты" букв, таких как `р`, `g` могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.
|
||
[/smart]
|
||
|
||
[smart header="Единицы `ex` и `ch`"]
|
||
|
||
В спецификации указаны также единицы [ex](http://www.w3.org/TR/css3-values/#ex-unit) и [ch](http://www.w3.org/TR/css3-values/#ch-unit), которые означают размер символа `"x"` и размер символа `"0"`.
|
||
|
||
Эти размеры присутствуют в шрифте всегда, даже если по коду этих символов в шрифте находятся другие значения, а не именно буква `"x"` и ноль `"0"`. В этом случае они носят более условный характер.
|
||
|
||
Эти единицы используются чрезвычайно редко, так как "размер шрифта" `em` обычно вполне подходит.
|
||
[/smart]
|
||
|
||
## Проценты %
|
||
|
||
Проценты `%`, как и `em` -- относительные единицы.
|
||
|
||
Когда мы говорим "процент", то возникает вопрос -- "Процент от чего?"
|
||
|
||
Как правило, процент будет от значения свойства родителя с тем же названием, но не всегда.
|
||
|
||
Это очень важная особенность процентов, про которую, увы, часто забывают.
|
||
|
||
Отличный источник информации по этой теме -- стандарт, [Visual formatting model details](http://www.w3.org/TR/CSS2/visudet.html).
|
||
|
||
Вот пример с `%`, он выглядит в точности так же, как с `em`:
|
||
|
||
```html
|
||
<!--+ autorun height=120 -->
|
||
<div style="font-size:150%">
|
||
Страусы
|
||
<div style="font-size:150%">Живут также в Африке</div>
|
||
</div>
|
||
```
|
||
|
||
В примере выше процент берётся от размера шрифта родителя.
|
||
|
||
А вот примеры-исключения, в которых `%` берётся не так:
|
||
<dl>
|
||
<dt>`margin-left`</dt>
|
||
<dd>При установке свойства `margin-left` в `%`, процент берётся от *ширины* родительского блока, а вовсе не от его `margin-left`.</dd>
|
||
<dt>`line-height`</dt>
|
||
<dd>При установке свойства `line-height` в `%`, процент берётся от текущего *размера шрифта*, а вовсе не от `line-height` родителя. Детали по `line-height` и размеру шрифта вы также можете найти в статье [](/font-size-line-height).</dd>
|
||
<dt>`width/height`</dt>
|
||
<dd>Для `width/height` обычно процент от ширины/высоты родителя, но при `position:fixed`, процент берётся от ширины/высоты *окна* (а не родителя и не документа). Кроме того, иногда `%` требует соблюдения дополнительных условий, за примером -- обратитесь к главе [](/height-percent).</dd>
|
||
</dl>
|
||
|
||
## Единица rem: смесь px и em
|
||
|
||
Итак, мы рассмотрели:
|
||
<ul>
|
||
<li>`px` -- абсолютные, чёткие, понятные, не зависящие ни от чего.</li>
|
||
<li>`em` -- относительно размера шрифта.</li>
|
||
<li>`%` -- относительно такого же свойства родителя (а может и не родителя, а может и не такого же -- см. примеры выше).</li>
|
||
</ul>
|
||
|
||
Может быть, пора уже остановиться, может этого достаточно?
|
||
|
||
Э-э, нет! Не все вещи делаются удобно.
|
||
|
||
Вернёмся к теме шрифтов. Бывают задачи, когда мы хотим сделать на странице большие кнопки "Шрифт больше" и "Шрифт меньше". При нажатии на них будет срабатывать JavaScript, который будет увеличивать или уменьшать шрифт.
|
||
|
||
Вообще-то это можно сделать без JavaScript, в браузере обычно есть горячие клавиши для масштабирования вроде [key Ctrl++], но они работают слишком тупо -- берут и увеличивают всю страницу, вместе с изображениями и другими элементами, которые масштабировать как раз не надо. А если надо увеличить только шрифт, потому что посетитель хочет комфортнее читать?
|
||
|
||
Какую единицу использовать для задания шрифтов? Наверно не `px`, ведь значения в `px` абсолютны, если менять, то во всех стилевых правилах. Вполне возможна ситуация, когда мы в одном правиле размер поменяли, а другое забыли.
|
||
|
||
Следующие кандидаты -- `em` и `%`.
|
||
|
||
Разницы между ними здесь нет, так как при задании `font-size` в процентах, эти проценты берутся от `font-size` родителя, то есть ведут себя так же, как и `em`.
|
||
|
||
Вроде бы, использовать можно, однако есть проблема.
|
||
|
||
Попробуем использовать этот подход для `<li>`.
|
||
|
||
Протестируем на таком списке:
|
||
|
||
```html
|
||
<!--+ run autorun height=150 no-beautify -->
|
||
<ul>
|
||
<li>Собака
|
||
<ul>
|
||
<li>бывает
|
||
<ul>
|
||
<li>кусачей
|
||
<ul>
|
||
<li>только
|
||
<ul>
|
||
<li>от жизни
|
||
<ul>
|
||
<li>собачей</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
```
|
||
|
||
Пока это обычный вложенный список.
|
||
|
||
Теперь уменьшим размер шрифта до `0.8em`, вот что получится:
|
||
|
||
```html
|
||
<!--+ run autorun height=100 no-beautify -->
|
||
<style>
|
||
li {
|
||
font-size: 0.8em;
|
||
}
|
||
</style>
|
||
|
||
<ul>
|
||
<li>Собака
|
||
<ul>
|
||
<li>бывает
|
||
<ul>
|
||
<li>кусачей
|
||
<ul>
|
||
<li>только
|
||
<ul>
|
||
<li>от жизни
|
||
<ul>
|
||
<li>собачей</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
```
|
||
|
||
Проблема очевидна. Хотели, как лучше, а получилось... Мелковато. Каждый вложенный `<li>` получил размер шрифта `0.8` от родителя, в итоге уменьшившись до нечитаемого состояния. Это не совсем то, чего мы бы здесь хотели.
|
||
|
||
Можно уменьшить размер шрифта только на одном "корневом элементе"... Или воспользоваться единицей `rem`, которая, можно сказать, специально придумана для таких случаев!
|
||
|
||
**Единица `rem` задаёт размер относительно размера шрифта элемента `<html>`.**
|
||
|
||
Как правило, браузеры ставят этому элементу некоторый "разумный" (reasonable) размер по-умолчанию, который мы, конечно, можем переопределить и использовать `rem` для задания шрифтов внутри относительно него:
|
||
|
||
```html
|
||
<!--+ run height=400 autorun no-beautify -->
|
||
<style>
|
||
*!*
|
||
html {
|
||
font-size: 14px;
|
||
}
|
||
li {
|
||
font-size: 0.8rem;
|
||
}
|
||
*/!*
|
||
</style>
|
||
|
||
<div><button id="up">Кликните, чтобы увеличить размер шрифта</button></div>
|
||
|
||
<img src="https://js.cx/clipart/angry_dog.png">
|
||
|
||
<ul>
|
||
<li>Собака
|
||
<ul>
|
||
<li>бывает
|
||
<ul>
|
||
<li>кусачей
|
||
<ul>
|
||
<li>только
|
||
<ul>
|
||
<li>от жизни
|
||
<ul>
|
||
<li>собачей</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
|
||
<script>
|
||
var html = document.documentElement;
|
||
up.onclick = function() {
|
||
// при помощи JS увеличить размер шрифта html на 2px
|
||
html.style.fontSize = parseInt(getComputedStyle(html, '').fontSize) + 2 + 'px';
|
||
};
|
||
</script>
|
||
```
|
||
|
||
Получилось удобное масштабирование для шрифтов, не влияющее на другие элементы.
|
||
|
||
Элементы, рамер которых задан в `rem`, не зависят друг от друга и от контекста -- и этим похожи на `px`, а с другой стороны они все заданы относительно размера шрифта `<html>`.
|
||
|
||
Единица `rem` не поддерживается в IE8-.
|
||
|
||
## Относительно экрана: vw, vh, vmin, vmax
|
||
|
||
Во всех современных браузерах, исключая IE8-, поддерживаются новые единицы из черновика стандарта [CSS Values and Units 3](http://dev.w3.org/csswg/css3-values/):
|
||
|
||
<ul>
|
||
<li>`vw` -- 1% ширины окна</li>
|
||
<li>`vh` -- 1% высоты окна</li>
|
||
<li>`vmin` -- наименьшее из (`vw`, `vh`), в IE9 обозначается `vm`</li>
|
||
<li>`vmax` -- наибольшее из (`vw`, `vh`)</li>
|
||
</ul>
|
||
|
||
**Эти значения были созданы, в первую очередь, для поддержки мобильных устройств.**
|
||
|
||
Их основное преимущество -- в том, что любые размеры, которые в них заданы, автоматически масштабируются при изменении размеров окна.
|
||
|
||
[online]
|
||
<p style="font-size:5vh">Этот текст написан с размером `5vh`.</p>
|
||
|
||
Вы сможете легко увидеть, как работает `vh`, если поменяете размер окна браузера. Текст выше будет расти/уменьшаться.
|
||
[/online]
|
||
|
||
## Итого
|
||
|
||
Мы рассмотрели единицы измерения:
|
||
|
||
<ul>
|
||
<li>`px` -- абсолютные пиксели, к которым привязаны и потому не нужны `mm`, `cm`, `pt` и `pc`. Используется для максимально конкретного и точного задания размеров.</li>
|
||
<li>`em` -- задаёт размер относительно шрифта родителя, можно относительно конкретных символов: `"x"`(`ex`) и `"0"`(`ch`), используется там, где нужно упростить масштабирование компоненты.</li>
|
||
<li>`rem` -- задаёт размер относительно шрифта `<html>`, используется для удобства глобального масштабирования: элементы которые планируется масштабировать, задаются в `rem`, а JS меняет шрифт у `<html>`.</li>
|
||
<li>`%` -- относительно такого же свойства родителя (как правило, но не всегда), используется для ширин, высот и так далее, без него никуда, но надо знать, относительно чего он считает проценты.</li>
|
||
<li>`vw`, `vh`, `vmin`, `vmax` -- относительно размера экрана.</li>
|
||
</ul>
|
||
|