Комментарии (1)
Ответ сгенерирован нейросетью и может содержать ошибки
Разница между em, rem и px
Это три основных единицы измерения в CSS, каждая с разным назначением. Правильное использование критично для создания адаптивного и масштабируемого интерфейса.
px (пиксели) — абсолютная единица
px — это абсолютная единица, равная одному пикселю экрана. Она фиксирована и не изменяется в зависимости от контекста.
.button {
width: 200px;
padding: 10px 20px;
font-size: 16px;
}
Характеристики:
- Фиксированный размер
- Не масштабируется при изменении размера шрифта родителя
- Хорошо для точного позиционирования
- Не рекомендуется для текста (проблемы с масштабированием)
em (элемент) — относительная единица
em — это относительная единица, равная размеру шрифта текущего элемента (или родителя, если размер не определён).
.container {
font-size: 16px;
}
.container h1 {
font-size: 2em; /* 2 * 16px = 32px */
margin-bottom: 1em; /* 1 * 32px = 32px (зависит от font-size элемента!) */
}
.container p {
font-size: 1em; /* 1 * 16px = 16px */
margin-bottom: 1em; /* 1 * 16px = 16px */
}
Проблема каскадирования em:
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em; /* 1.5 * 16px = 24px */
}
.grandchild {
font-size: 1.5em; /* 1.5 * 24px = 36px (не 24px!) */
}
/* Результат: шрифт растёт с каждым уровнем вложенности */
Характеристики:
- Относительная единица
- Вычисляется от размера шрифта текущего элемента
- Может привести к неожиданным размерам при вложенности
- Хорошо для отступов и padding внутри компонента
rem (корневой элемент) — относительная, но стабильная
rem — это относительная единица, равная размеру шрифта корневого элемента (<html>).
html {
font-size: 16px; /* Базовый размер */
}
.container {
font-size: 1.5rem; /* 1.5 * 16px = 24px */
}
.container h1 {
font-size: 2rem; /* 2 * 16px = 32px (ВСЕГДА от корня!) */
margin-bottom: 1rem; /* 1 * 16px = 16px */
}
.container p {
font-size: 1rem; /* 1 * 16px = 16px */
margin-bottom: 1rem; /* 1 * 16px = 16px */
}
Нет проблемы каскадирования:
.parent {
font-size: 1.5rem; /* 24px */
}
.child {
font-size: 1.5rem; /* 24px (не 36px!) */
}
.grandchild {
font-size: 1.5rem; /* 24px (не 54px!) */
}
Характеристики:
- Относительная единица
- Вычисляется от размера шрифта корневого элемента
- Предсказуемо и согласованно
- Идеально для масштабирования всего интерфейса
- Современный стандарт для адаптивного дизайна
Таблица сравнения
| Параметр | px | em | rem |
|---|---|---|---|
| Тип | Абсолютная | Относительная | Относительная |
| Зависит от | Ничего | Font-size текущего элемента | Font-size <html> |
| Каскадирование | N/A | Проблематичное | Нет проблем |
| Масштабируемость | Плохая | Хорошая (но сложная) | Отличная |
| Читаемость | Понятно | Требует вычислений | Понятно |
| Лучше всего для | Точное позиционирование | Отступы в компонентах | Основные размеры |
Практические примеры
1. Адаптивная типография с rem
/* Mobile first */
html {
font-size: 14px;
}
h1 {
font-size: 2.5rem; /* 35px на мобильном */
line-height: 1.2;
}
p {
font-size: 1rem; /* 14px */
}
/* Tablet */
@media (min-width: 768px) {
html {
font-size: 16px;
}
/* h1 теперь 40px (2.5 * 16) */
}
/* Desktop */
@media (min-width: 1024px) {
html {
font-size: 18px;
}
/* h1 теперь 45px (2.5 * 18) */
}
2. Масштабируемые компоненты с em
/* Button компонент с em */
.button {
font-size: 1rem; /* Наследуется от контекста */
padding: 0.5em 1em; /* Пропорционально size */
border-radius: 0.25em;
line-height: 1.5em;
}
/* Большая кнопка */
.button.large {
font-size: 1.5rem;
/* padding и другие остаются пропорциональны */
}
/* Маленькая кнопка */
.button.small {
font-size: 0.875rem;
}
3. Интервалы с rem (предпочтительно)
/* Согласованные интервалы */
.container {
margin-bottom: 2rem; /* 32px при базовом 16px */
padding: 2rem;
}
.section {
margin-top: 3rem; /* 48px */
margin-bottom: 2rem; /* 32px */
}
.paragraph {
margin-bottom: 1rem; /* 16px */
}
Когда что использовать
Используй px для:
- Бордеры:
border: 1px solid #ccc - Очень малые размеры:
border-radius: 3px - SVG и иконки
- Когда нужна точность
Используй em для:
- Отступы внутри компонентов
- Относительные размеры внутри одного элемента
- Когда нужна масштабируемость компонента
Используй rem для:
- Размеры шрифтов
- Основные отступы и маржины
- Высоты элементов
- Когда нужна глобальная масштабируемость
Современный подход (2025)
/* Устанавливаем базовый размер шрифта */
html {
font-size: clamp(14px, 1vw, 16px); /* Адаптивный базовый размер */
}
/* Используем rem для всех размеров */
body {
font-size: 1rem;
line-height: 1.5;
}
h1 {
font-size: clamp(1.75rem, 5vw, 2.5rem);
}
p {
font-size: 1rem;
margin-bottom: 1rem;
}
.button {
padding: 0.5rem 1rem;
font-size: 1rem;
}
Важные заметки
✅ rem — предпочтительный выбор для современного веб-дизайна ✅ em — для компонентов, которые должны масштабироваться ✅ px — для точных размеров (бордеры, очень малые элементы) ✅ Используй clamp() для адаптивных размеров ✅ Не забывай про line-height в rem ✅ Проверяй доступность — пользователи могут изменять базовый размер шрифта
Вывод: rem — это современный стандарт для адаптивного дизайна. Это даёт полный контроль над масштабированием интерфейса через одну переменную (размер html).