Веб-разработчику может быть сложно разобраться в разнообразии единиц измерения CSS и понять, когда и где какие единицы измерения лучше использовать на веб-странице. Может казаться, что проще использовать только одну единицу измерения во всех ситуациях, но такое решение может сильно ограничить удобство использование дизайна. 

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

Пиксели (px)

Использовать для: задания размера тонким рамкам и обычным элементам при создании дизайнов с фиксированной шириной, и для смещения теней CSS.

Не использовать для: точек перехода @media, так как это усиливает тенденцию создания дизайна под измерения устройства, а не адаптацию дизайна для разных устройств. Вместо это используйте единицы измерения rem или em. Еще не используйте для задания размеров шрифтов, кроме задания размера базового шрифта для сброса CSS.

Проценты (%)

Использовать для: создания адаптивных изображений и блоков, задания высоты тега body в некоторых случаях.

Не использовать для: задания размеров шрифтов, кроме задания размеров шрифтов для сброса CSS.

Em и ex

Использовать для: задания размеров шрифтов и элементов, связанных с размерами шрифтов, таких как, например, внешние отступы, не забывая, что у единиц измерения em и ex есть небольшие «подводные камни» при использовании в сложных верстках. Подумайте об использовании единиц измерения rem вместо них.

Пункты (pt) и пики (pc)

Использовать для: таблиц стилей для печати.

Не использовать для: всего остального.

rem

Использовать для: тех ситуаций, когда нужна более надежная и предсказуемая альтернатива для единиц измерения em и ex, включая точки перехода @media.

Не использовать для: сайтов, которым нужна поддержки таких браузеров, как Internet Explorer версии 8 и ранее, или использовать, применяя обходной путь в виде назначения других единиц измерения для родительского элемента или использования плагинов, добавляющих в браузер нужные функции для применения этой единицы измерения.

Единицы измерения, связанные с размерами устройства отображения (vh и vw)

Использовать для: адаптивных размеров шрифтов и создания идеальных адаптивных фигур.

Не использовать для: media queries, так как размер устройства отображения никогда не будет отличаться от ширины 100vw и высоты 100vh: по определению эти числа соответствуют текущим измерениям окна браузера, не зависимо от того, насколько размер экрана устройства большой или маленький. Не забывайте об отсутствии поддержки в браузере Internet Explorer версии 8 и ранее.

Дюймы (in), сантиметры (cm) и миллиметры (mm)

Использовать для: таблиц стилей для печати, особенно для внешних отступов страниц.

Не использовать для: всего остального.

Символ (ch)

Использовать для: задания размеров и настроек у моноширинных шрифтов. Не забывайте об ограниченной поддержке браузерами.

Автор статьи  Dudley Storey

Перевод — Дежурка

Смотрите также:

• Использование единиц измерения rem
• Использование блочных и строчных элементов
• Использование единиц измерения CSS Q