Eдиницы измерения
- px – абсолютные пиксели, к которым привязаны и потому не нужны mm, cm, pt и pc. Используется для максимально конкретного и точного задания размеров.
- em – задаёт размер относительно шрифта родителя, можно относительно конкретных символов: "x"(ex) и "0"(ch), используется там, где нужно упростить масштабирование компонентов.
- rem – задаёт размер относительно шрифта <html>, используется для удобства
глобального масштабирования: элементы которые планируется
масштабировать, задаются в
rem, а JS меняет шрифт у<html>. - % – относительно такого же свойства родителя (как правило, но не всегда), используется для ширин, высот и так далее, без него никуда, но надо знать, относительно чего он считает проценты.
примеры-исключения, в которых % берётся не так:
margin-left
При установке свойства margin-left в %,
процент берётся от ширины родительского блока,
а вовсе не от его margin-left.
line-height
При установке свойства line-height в %,
процент берётся от текущего размера шрифта,
а вовсе не от line-height родителя.
Детали по line-height и размеру шрифта вы также можете найти в статье Свойства "font-size" и "line-height".
width/height
Для width/height обычно процент от ширины/высоты родителя,
но при position:fixed, процент берётся от ширины/высоты
окна (а не родителя и не документа). Кроме того, иногда %
требует соблюдения дополнительных условий.
относительно размера экрана:
- vw – 1% ширины окна
- vh – 1% высоты окна
- vmin – наименьшее из (vw, vh), в IE9 обозначается vm
- vmax – наибольшее из (vw, vh)
Эти значения были созданы, в первую очередь, для поддержки мобильных устройств.
Их основное преимущество – в том, что любые размеры, которые в них заданы, автоматически масштабируются при изменении размеров окна.