renovations
This commit is contained in:
Ilya Kantor
parent
dceccedb58
commit
6ac9e3a500
182 changed files with 275 additions and 324 deletions
319
8-css-for-js/2-css-units/article.md
Normal file
319
8-css-for-js/2-css-units/article.md
Normal file
|
|
@ -0,0 +1,319 @@
|
|||
# Единицы измерения: "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="Что такое размер шрифта?"]
|
||||
Что такое "размер шрифта"? Это вовсе не "размер самой большой буквы в нём", как можно было бы подумать.
|
||||
|
||||
Размер шрифта -- это некоторая "условная единица", которая встроена в шрифт.
|
||||
|
||||
Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание.
|
||||
[/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 -->
|
||||
<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 -->
|
||||
<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 -->
|
||||
<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>
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue