Пиксель может быть дробным, например 34.3 px, браузер нередко и сам использует «дробные» пиксели, например, когда необходимо ширину в 1000 пикселей разделить на 3 или на 7 частей.
Работая со старыми таблицами CSS Вы можете также столкнуться с следующими единицами измерения:
mm = 3.8px (миллиметр);
cm = 38px (сантиметр);
pt = 4/3px (типографский пункт);
pc = 16px (типографская пика).
Данные единицы измерения перестали использовать по причине того, что браузеры всё равно конвертируют их в пиксели и для большей точности всё-таки рекомендуется их не использовать, а указывать величины сразу в px.
Em — это единица измерения «относительно шрифта».
Например:
<div style="font-size:14px">
Первая строка
<div style="font-size:14px">Вторая строка</div>
</div>
результат:
и
<div style="font-size:2em">
Первая строка
<div style="font-size:2em">Вторая строка</div>
</div>
результат:Как можно заметить, шрифт изменился относительно текущего шрифта в два раза.
Так же существует схожая единица — ex, указывающая высоту буквы «x» в нижнем регистре, если по какой-то причине в шрифте нет такого символа (а значит нет подходящей метрики), то браузер попробует вычислить величину ex самостоятельно. Схожая ситуация с единицей измерения ch, отличие лишь в том, что вместо высоты символа «x», измеряется ширина «0».
Единица em, является с одной стороны весьма удобной, поскольку изменяя параметры одного блока мы не будем переживать за остальные (они изменятся «как надо», автоматически и в других местах), но это «хорошо работает» лишь до тех пор, пока уровень вложенности блоков 1-2, однако бывают ситуации (самый яркий пример «списки внутри списков») когда такая вложенность может дойти до 3-4, а то и 5-6 уровней.
Предположим, мы описываем какой-нибудь модуль, у этого модуля есть свойства, а у этого свойства есть параметры и каждый параметр так же подразумевает некоторые разделения на пункты. А в таблице стилей мы уже указали свойство 0.7em. Стоит ли говорить, что последние пункты придётся читать с микроскопом да и то не факт, что получится это сделать.
Здесь на помощь приходит единица измерения rem. Она изменяет свойства относительно не родительского элемента, а «html», то есть вся вложенность изменится в размере шрифта, но дальше меняться уже не будет. (Единица rem не поддерживается IE8 и в более ранних версиях IE).
Размер шрифта так же можно задавать относительно ширины или высоты экрана (не поддерживается браузером IE8 и в более ранних версиях IE):
vw — 1% ширины окна;
vh — 1% высоты окна;
vmin — наименьшее из vw / vh;
vmax — наибольшее из vw / vh.
Последнее было придумано для мобильных устройств и их преимущество в том, что любые размеры, которые в них заданы, автоматически масштабируются при изменении размеров экрана.
