Анализ сайта: Проверка Траста

Единицы измерения в CSS: пиксели, EM и проценты.

Единицы измерения играют важнейшую роль в обозначении размеров в строительстве зданий, сооружений и других объектов, в том числе в строительстве веб-сайтов. В программировании (в частности, в каскадных таблицах стилей) применяются различные способы измерения величин: пиксели, EM, проценты и другие.

Единицы измерения в CSS

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

Оглавление:

  1. Пиксели
  2. EM
  3. Проценты

PX

Пиксель – фиксированная единица измерения и мельчайшая точка экрана. Величину px, задаваемую в CSS, часто путают с физической точкой, из которых состоит экран монитора. Пиксель в CSS никак не связан с разрешением экрана. Если, допустим, открыть сайт с фиксированной шириной 1024 пикселя на планшете с разрешением 1024х480px, страница не влезет в экран по горизонтали.

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

Определение отображаемой области

Как же найти реальную отображаемую область устройства? Можно воспользоваться удобным софтом для приблизительного расчета области отображения в пикселях – конвертор сантиметров в пиксели. Нам понадобится указать длину экрана в см и PPI (количество пикселей на дюйм) или DPI (количество точек на дюйм), значения которых указываются в спецификации к устройству. Выполнив все расчеты, я выяснил, что ширина экрана моего планшета всего 953px.

конвертор сантиметров в пиксели

Пиксели и размер шрифта в Фотошопе

В программе Photoshop размеры шрифта по умолчанию выставляются в единице измерения Pt (пункт). Пункты обычно используются в печати. Чтобы избежать путаницы с px (пикселем) при переводе в веб-документы, единицы измерения можно поменять в меню Photoshop: Edit > Preferences > Units and Rulers.

Появляется окно, в котором устанавливается нужная опция, как показано ниже на скриншоте. Выберите единицу измерения pixels в списке Type.

Размеры шрифта будут отображаться в пикселях.

EM

EM – это относительная единица измерения. В CSS-файле единица em является множителем базового размера шрифта в устройстве или самом документе и обозначает, во сколько раз увеличивается размер шрифта.

Например, в атрибуте font-size прописан размер шрифта 16px. Поэтому 1em равно 16px, 2em = 32px и т. д. EM традиционно применяется для обозначения размеров шрифта и является стандартной единицей измерения в таблицах стилей, однако, em может использоваться и для указания длины элементов.

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

Во-вторых, можно задать базовое значение font-size равным 10px, в таком случае значение em вычисляется гораздо проще. Например, 15px будет соответствовать 1.5em. Думаю, принцип понятен.

Проценты

С процентами сложностей не возникает: размер задается в % от базового значения. Предположим, базовая ширина объекта составляет 800px, тогда 50% соответствует 400px. В последние годы адаптивный дизайн воспринимается уже стандартом веб-дизайна, поэтому измерение в процентах используется все чаще.

Рассмотрим следующий пример: селекторам класса .container и .main присвоено значение width 60%, но эти классы относятся к разным родительским элементам, поэтому имеют разную ширину. Селектор .container берет ширину 60% от ширины окна браузера, а для .main родительским уже является селектором .container.

проценты css

Результат будет таким:

шаблон

Процент тоже является относительной единицей измерения, поэтому, как и EM, обладает похожим ограничением. Приходится рассчитывать, как выразить, допустим, 15px в процентах от 500px. Обычно это происходит при переводе единицы px на этапе дизайна в веб-документ. Есть два варианта решения этого вопроса. Первый – традиционный расчет на калькуляторе. Второй способ предполагает знание препроцессоров CSS. В этом случае можно применить функцию percentage() в модуле Sass.

Заключение

Среди специалистов не утихают споры об оптимальных методах использования единиц измерения в веб-дизайне. В идеальном варианте, единицу px стоит применять для описания свойств, которые должны быть точными, например, радиус скругления в свойстве border-radius или смещение тени по горизонтали или вертикали в свойстве box-shadow. Для размеров шрифта лучше использовать единицу em. В адаптивном дизайне эффективнее всего применять проценты.

5
Фев

Вверх

Как создать сайт