Единицы измерения в стилях

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

Абсолютные единицы

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

  • px (пиксели) — самая популярная единица для задания ширины, высоты, отступов и шрифтов. Один пиксель соответствует одному физическому пикселю экрана при стандартной плотности дисплея. Пример использования:
width: 200px;
height: 100px;

  • pt (пункты) — используется преимущественно в типографике, где 1pt равен 1/72 дюйма. Применяется реже в вебе, но иногда полезен при интеграции с печатной продукцией.

  • cm, mm (сантиметры, миллиметры) — единицы, ориентированные на печать. На экране их поведение зависит от плотности пикселей устройства.

  • in (дюймы) — также печатная единица, 1in = 2.54 см. Используется редко в веб-разработке.

  • pc (пики) — 1pc = 12pt. Веб-применение ограничено, чаще встречается в полиграфии.

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

Относительные единицы

Относительные единицы вычисляются относительно других значений, что позволяет создавать адаптивные интерфейсы. Основные типы:

  • em — определяется размером шрифта родительского элемента. 1em = размер шрифта родителя. Пример:
font-size: 2em; /* в 2 раза больше шрифта родителя */
padding: 0.5em; /* половина размера шрифта родителя */
  • rem (root em) — аналогично em, но базируется на размере шрифта корневого элемента (html). Это упрощает управление масштабированием всего интерфейса:
font-size: 1.5rem; /* 1.5 раза размер шрифта html */
margin: 2rem;
  • % (проценты) — вычисляются относительно родительского элемента, обычно применяются к ширине, высоте или отступам. Пример:
width: 50%; /* половина ширины родителя */
padding-top: 10%; /* 10% от ширины родителя */

  • vw, vh, vmin, vmax — единицы, зависящие от размеров окна браузера:

    • 1vw = 1% ширины окна
    • 1vh = 1% высоты окна
    • vmin = минимальное значение между шириной и высотой окна
    • vmax = максимальное значение между шириной и высотой окна

Пример:

font-size: 5vw;
height: 50vh;

Эти единицы полезны для создания адаптивных макетов и элементов, растущих или сжимающихся вместе с окном браузера.

  • ch — ширина символа «0» в текущем шрифте. Используется для точного выравнивания текстовых полей и контейнеров:
width: 30ch; /* ширина примерно 30 символов */
  • ex — высота буквы “x” в текущем шрифте. Применяется редко, но полезна для точной типографики.

Использование единиц измерения в Umbrella JS

Umbrella JS предоставляет удобный API для работы с DOM и стилями. Метод .css() позволяет получать и задавать значения стилей с любой единицей измерения:

u('.box').css('width', '50%');
u('.box').css('font-size', '1.2em');

Особенности:

  • Можно использовать смешанные единицы, например calc():
u('.box').css('width', 'calc(100% - 20px)');
  • Чтение значения через .css() возвращает строку с единицей:
let width = u('.box').css('width'); // "400px" или "50%"
  • Для динамического изменения относительно текущего значения можно комбинировать методы .css() и .each():
u('.box').each(function(el) {
    let currentHeight = parseFloat(u(el).css('height'));
    u(el).css('height', (currentHeight * 1.2) + 'px');
});

Рекомендации по выбору единиц

  • Для фиксированных элементов лучше использовать px.
  • Для адаптивной типографики предпочтительны em и rem.
  • Для относительных размеров блоков — %.
  • Для динамических макетов под экран — vw, vh.
  • Для точной текстовой верстки — ch, ex.

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

Хотите, я могу сделать продолжение с практическими примерами адаптивного дизайна через Umbrella JS с демонстрацией всех этих единиц в действии?

Оглавление