Какие единицы измерения CSS выбрать. Что лучше, проценты, пиксели, em и т.д.

18.07.18 ИТ / CSS 3990

При разработке сайта активно используются таблицы каскадных стилей CSS. В них применяются различные единицы измерения, среди которых пиксели, проценты, дюймы и т.д. Перед разработчиком в процессе верстки страницы сайта часто встает вопрос, какие единицы применить.

Действительно, для чего в CSS так много единиц измерения? Это сделано для удобства и гибкости. Разработчик может самостоятельно применять нужные единицы измерения исходя из задачи. Часто можно заметить, как бездумно на всем сайте используется только одна единица измерения, выбранная из каких-либо соображений. Это неверный подход, использовать единицы измерения нужно исходя из ситуации.

Какие единицы измерения существуют в CSS? Все единицы измерения можно разделить на две большие категории: относительные и абсолютные. Относительные единицы определяют размер элемента относительно значения другого размера, а абсолютные не зависят от устройства вывода.

Относительные единицы чаще применяют для работы с текстовым контентом или, когда нужно вычислить процентное соотношение между элементами. В относительные входят:

• Высота шрифта текущего элемента (em),
• Высота буквы x (ex),
• Пиксели (px),
• Проценты (%).

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

• Дюйм, 1 дюйм равен 2,54 см (in),
• Сантиметр (cm),
• Миллиметр (mm),
• Пункт, 1 пункт равен 1/72 дюйма (pt),
• Пика, 1 пика равна 12 пунктам (pc).

Теперь, когда рассмотрели единицы измерения и их группы, разберемся какие единицы где использовать. Стоит помнить, что выбор единиц измерения зависит также от устройства вывода, например, экран или печать. Для экрана рекомендуются следующие: em, px, %. Для печати можно использовать: em, cm, mm, in, pc, pt, %. Например, при верстке страницы, ширину блоков можно задавать в процентах, высоту в пикселях, размер текста в em или пикселях. Таким образом, какие единицы измерения CSS выбрать, решает сам разработчик, исходя из потребностей.