Создание сайтов с нуля - урок 16 - Единицы измерения в web, пиксели, проценты, em, rem, vw, vh

Единицы измерения, применяемые в сайтостроении:

px – пиксели, абсолютная единица измерения. Используется для максимально конкретного и точного задания размеров;

em – задаёт размер относительно шрифта родителя;

rem – задаёт размер относительно шрифта элемента html;

% – как правило, задает размер относительно аналогичного свойства родителя (но не всегда), используется для ширин, высот и так далее;

vw, vh, vmin, vmax – задают размеры относительно размера экрана.

Абсолютная единица измерения "пиксель" (px)

Пиксель – это самая базовая и абсолютная единица измерения. Еще ее называют окончательной, потому что браузер всегда все значения в конечном итоге пересчитает именно в пиксели.

Если говорить упрощенно по отношению к монитору компьютера, то пиксель это одна самая маленькая неделимая частица экрана. Другими словами, весь экран монитора состоит из точек, именно эти точки называются пикселями и именно они формируют изображение.

Когда мы будем работать с макетами в программе фотошоп, то там изображение тоже представленно в виде точек, каждая из которых отличается от соседних только цветом.

При вычислениях размеров элементов может получиться, что длина какого-то блока будет равна дробному значению в пикселях, например, 24,5. Это совершенно нормально, браузер при окончательном отображении дробные пиксели округлит до целых.

Относительная единица измерения "em"

Размеры элементов в em – относительные, они определяются по текущему контексту. т.е. 1em = текущий размер шрифта.

Другими словами, размеры, заданные в em, будут уменьшаться или увеличиваться вместе со шрифтом. С учётом того, что размер шрифта обычно определяется в родителе, и может быть изменён ровно в одном месте, это бывает очень удобно.

Можно брать любые пропорции от текущего шрифта: 2em, 0.5em и т.п.

Проценты (%)

Проценты, как и em – относительные единицы.

Когда мы говорим «процент», то возникает вопрос – «Процент от чего?». Как правило, процент берется от значения свойства родителя с тем же названием, но не всегда. Это очень важная особенность процентов, про которую, увы, часто забывают.

Например, для свойства font-size процент берётся от размера шрифта родителя, для свойства margin-left - от ширины родительского блока, а для свойства line-height - от текущего размера шрифта. Для width и height обычно процент берется от ширины и высоты родителя, но при position:fixed процент берётся от ширины и высоты окна.

Единица rem задаёт размер относительно размера шрифта элемента html

Как правило, браузеры ставят этому элементу какой-то размер по-умолчанию, который можно переопределить и использовать rem для задания шрифтов внутри относительно него:  html { font-size: 14px; }

Получилось удобное масштабирование для шрифтов, не влияющее на другие элементы.

Элементы, размер которых задан в rem, не зависят друг от друга и от контекста – и этим похожи на px, а с другой стороны они все заданы относительно размера шрифта html.

Единицы измерения относительно экрана: vw, vh, vmin, vmax

Во всех современных браузерах, исключая IE8-, поддерживаются новые единицы из черновика стандарта:

• vw – 1% ширины окна;
• vh – 1% высоты окна;
• vmin – наименьшее из (vw, vh);
• vmax – наибольшее из (vw, vh).

Эти значения были созданы, в первую очередь, для поддержки мобильных устройств. Их основное преимущество в том, что любые размеры, которые в них заданы, автоматически масштабируются при изменении размеров окна.