Единицы измерения, применяемые в сайтостроении:
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).
Эти значения были созданы, в первую очередь, для поддержки мобильных устройств. Их основное преимущество в том, что любые размеры, которые в них заданы, автоматически масштабируются при изменении размеров окна.
