Единицы измерения в веб-дизайне

👍 Научим создавать сайты на WordPress бесплатно за 11 уроков. Подробнее →

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

В CSS, для указания размера и длины элементов, используют различные единицы измерения – px, em, rem, %, vw и vh. В этом материале выясним, какими они бывают, различия между ними и советы по использованию.

Все единицы бывают абсолютными и относительными.

Абсолютные

Пиксели (px) считаются абсолютными единицами измерения, хотя они относятся к DPI и разрешению устройства просмотра. Но на самом устройстве блок px закреплен и не меняется ни на каком другом элементе. Использование px может быть проблематичным для отзывчивых сайтов, но они полезны для поддержания согласованного размера некоторых элементов. Если у вас есть элементы, размер которых нельзя изменять, то хорошим выбором будет использование px.

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

  • em – относительно родительского элемента;
  • rem – относительно корневого элемента (тег HTML);
  • % – относительно родительского элемента;
  • vw – относительно ширины области просмотра;
  • vh – относительно высоты области просмотра.

В отличие от px, относительные единицы, такие как %, em и rem, лучше подходят для адаптивного дизайна, а также помогают соответствовать стандартам доступности. Относительные единицы лучше масштабируются на разных устройствах, поскольку их можно увеличивать и уменьшать в соответствии с размером другого элемента.

Рассмотрим простой пример. В большинстве браузеров размер шрифта по умолчанию составляет 16 пикселей. Относительные единицы рассчитывают размер на основе этой базы. Если вы измените базу, установив базовый размер для HTML-тега с помощью CSS, тогда он станет основой для вычисления относительных единиц на всей остальной странице. Аналогично, если пользователь изменяет размер шрифта, это становится основой для вычисления относительных единиц. Что означают эти единицы при работе со значением по умолчанию 16 пикселей? Указанное вами число умножит это число на размер по умолчанию.

  • 1em = 16px (1 * 16)
  • 2em = 32px (2 * 16)
  • .5em = 8px (.5 * 16)
  • 1rem = 16px
  • 2rem = 32px
  • .5rem = 8px
  • 100% = 16px
  • 200% = 32px
  • 50% = 8px

Но что будет, если изменить размер по умолчанию? Поскольку это относительные единицы, окончательные значения размера будут основаны на новом базовом размере. Хотя значение по умолчанию составляет 16 пикселей, если изменить его на 14, тогда рассчитанные размеры будут такими:

  • 1em = 14px (1 * 14)
  • 2em = 28px (2 * 14)
  • .5em = 7px (.5 * 14)
  • 1rem = 14px
  • 2rem = 28px
  • .5rem = 7px
  • 100% = 14px
  • 200% = 28px
  • 50% = 7px

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

В чем разница между em и rem?

На примере видно, что em и rem выглядят одинаково. Так чем же они отличаются?

Проще говоря, они различаются по наследству. rem основан на корневом элементе (HTML). Каждый дочерний элемент, который использует rem, будет затем использовать корневой размер HTML в качестве точки вычисления, независимо от того, заданы ли для родительского элемента какие-либо другие размеры.

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

Подробнее о vw и vh

Единицы области просмотра представляют собой процент от текущего окна просмотра браузера (текущий размер браузера). Хотя это похоже на единицы измерения %, но есть разница. Единицы области просмотра рассчитываются как процент от текущего размера области просмотра браузера. С другой стороны, процентные единицы рассчитываются как процент от родительского элемента, который может отличаться от размера области просмотра.

Для примера рассмотрим область просмотра мобильного экрана размером 480×800 пикселей.

  • 1 vw = 1% ширины области просмотра (или 4,8 px).
  • 50 vw = 50% ширины области просмотра (или 240 px)
  • 1 vh = 1% от высоты области просмотра (или 8 px).
  • 50 vh = 50% высоты области просмотра (или 400 px).

Если размер области просмотра изменяется, размер элемента меняется соответственно.

Нажмите, пожалуйста, на одну из кнопок, чтобы узнать понравилась статья или нет.

Создай свой первый сайт на WordPress
Если Вам понравилась статья — поделитесь с друзьями
Михаил Петров
Привет! Меня зовут Михаил Петров. Я копирайтер и занимаюсь этим с 2013 года. Скрупулезность и ответственность - моя фишка! Не могу делать как попало и добиваюсь, чтоб заказчик сказал минимум “неплохо”. За все время своей работы пришлось написать и отредактировать немало разной “текстовухи”, включая SEO-тексты, отзывы и прочую чушь. На сегодняшний день специализируюсь на написании информационных статей и руководств технического направления. Вижу смысл и светлое будущее в текстах для людей, а не для машин.
Задать вопрос