Px или rem в CSS: выбор единиц измерения размеров

Быстрый ответ

Если ваша цель — адаптивный дизайн и пользовательская настройка типографики, то оптимальным решением будет использование единиц измерения rem. Они меняются в зависимости от базового размера шрифта в браузере. Размер rem актуален в 2022 году для создания упругих макетов. Но если вы предпочитаете абсолютный контроль над размерами элементов и позволить им оставаться неизменными, то выбирайте px. Этот тип единиц отлично подходит для точного позиционирования пикселей.

Пример:

html { font-size: 100%; } // Запомните! От этого значения все отталкивается!
h1 { font-size: 2rem; } // Заголовок на 100% больше базового размера
.button { width: 50px; } // Размер кнопки будет постоянным

Рекомендуется использовать rem для текста и внешних отступов между элементами. В то время как для элементов интерфейса, которые не должны масштабироваться (например, изображения), лучше подойдут px.

Пиксели и rem: в чём разница?

Почему px?

Удобство использования px заключается в их надёжности: их размер остаётся неизменным.

• Если вам нужен абсолютный контроль над размерами элементов, выберите px.
• Для чёткости изображений и границ px — идеальное решение.
• Если вы работаете в условиях совместимости со старыми браузерами (здравствуйте, IE 😄), тогда px — ваш выбор.

Зачем rem?

rem — это символ гибкости и современного подхода. Эти единицы привязаны к размеру шрифта корневого элемента и берутся в случаях:

• Доступности: Людям с визуальными ограничениями явно удобнее читать текст в rem.
• Масштабируемости: Если вы хотите создать сайт, который прекрасно отображается на любых экранах, используйте rem.
• Обслуживаемости: При необходимости изменения макета использование rem упрощает его обновление.

Сочетание px и rem: гармония в мире CSS

В мире CSS существует гармония между px и rem — это комбинация традиций и новаторства, которая обеспечивает баланс между устойчивостью и гибкостью:

.element {
  margin: 20px; /* для тех, кто предпочитает стабильность */
  margin: 2.5rem; /* для тех, кто выбирает гибкость */
}

Некоторые фреймворки, такие как Bootstrap 4, уже признают rem будущим динамических макетов.

Однако, стоит быть внимательным с некоторыми тонкостями, например, с багами размера шрифта в Safari, связанными с медиа-запросами и rem. Будьте готовы к возможным неожиданностям.

Визуализация

Рассмотрим веб-страницу как город:

`px` — это здания 🏢, их размеры фиксированы и неизменны.
`rem` — это жители 🚶, которые адаптируются под общую атмосферу города.

Адаптивность rem:

На маленьком экране 📱: Город маленький, жители — маленькие.
На большом экране 🖥️: Город большой, жители, соответственно, большие.

Стабильность px:

Независимо от размера экрана:
🏢 = 🏢 = 🏢 (здания остаются прежними)

Инструменты для правильного выбора

Упрощение с использованием CSS-препроцессоров

Современные препроцессоры, например, Sass или Less, облегчают работу с единицами rem и px. Определите переменные или миксины, используйте удобные медиа-запросы для простого преобразования единиц измерения:

$baseFontSize: 16px; // Значение-стандарт для всех

@mixin font-rem($size) {
  font-size: ($size * 1px); // Проверенное временем решение
  font-size: ($size / $baseFontSize) * 1rem; // Гибкость и современность
}

Динамическое масштабирование

Меняя размер шрифта корневого элемента, вы контролируете масштаб всего сайта:

html { font-size: 125%; } // Увеличенные размеры для удобства

Учтите пользователей

При выборе единиц измерения обращайте внимание на удобство пользователя: настройки масштаба, предпочитаемый размер шрифта и т. д. Выбор rem — это выбор в пользу удобства пользователей.

Полезные материалы

1. CSS значения и единицы измерения – Изучение веб-разработки | MDN
2. Единицы измерения CSS
3. Отзывчивый и текучий шрифт с единицами vh и vw — Smashing Magazine
4. Понимание и использование единиц rem в CSS — SitePoint
5. "rem" | Могу ли я использовать... Справочные таблицы для HTML5, CSS3 и др.
6. Модуль CSS Значения и единицы измерения Уровень 3
7. REM против EM – Вечное противостояние | Zell Liew