- Home »
Объяснение единиц измерения в CSS — px, em, rem, % и др.
Если ты занимаешься не только администрированием серверов, но и поддержкой веб-проектов, то наверняка сталкивался с CSS. И если код на сервере — это твоя стихия, то стили могут вызывать вопросы. Особенно когда дело касается единиц измерения: почему где-то используется `px`, а где-то `em`? Почему на одном устройстве всё выглядит нормально, а на другом — как будто кто-то взорвал вёрстку? Понимание единиц измерения в CSS критически важно для создания адаптивных интерфейсов административных панелей, мониторинговых дашбордов и любых веб-интерфейсов, с которыми ты работаешь. Это поможет избежать ситуаций, когда твой красивый Grafana-дашборд превращается в кашу на мобильных устройствах, а пользователи жалуются на нечитаемый интерфейс.
Как это работает: основы единиц измерения
CSS предлагает два основных типа единиц измерения: абсолютные и относительные. Абсолютные единицы имеют фиксированный размер независимо от контекста, а относительные — меняются в зависимости от родительских элементов, размера экрана или других факторов.
Абсолютные единицы
- px (пиксели) — самая популярная единица, соответствует одному пикселю на экране
- pt (пункты) — типографская единица, 1pt = 1/72 дюйма
- pc (пики) — 1pc = 12pt
- mm, cm, in — миллиметры, сантиметры, дюймы
Относительные единицы
- em — относительно размера шрифта родительского элемента
- rem — относительно размера шрифта корневого элемента (<html>)
- % — проценты от родительского элемента
- vw, vh — проценты от ширины и высоты viewport
- vmin, vmax — проценты от минимального/максимального размера viewport
Пошаговая настройка и практические примеры
Давайте разберём каждую единицу на практических примерах, которые пригодятся при создании интерфейсов:
Пиксели (px) — когда нужна точность
/* Идеально для иконок и элементов UI */
.server-status-icon {
width: 16px;
height: 16px;
border: 1px solid #ccc;
}
/* Отступы в административных панелях */
.admin-panel {
padding: 20px;
margin: 10px;
}
Плюсы: предсказуемость, точность, простота
Минусы: не адаптивность, проблемы с масштабированием
Em — каскадное масштабирование
/* Базовый размер шрифта */
.dashboard {
font-size: 16px;
}
/* Заголовки масштабируются относительно базового размера */
.dashboard h1 {
font-size: 2em; /* 32px */
margin-bottom: 0.5em; /* 8px */
}
.dashboard h2 {
font-size: 1.5em; /* 24px */
margin-bottom: 0.75em; /* 12px */
}
/* Проблема каскадирования */
.nested-element {
font-size: 1.2em; /* Если внутри h1, то 32px * 1.2 = 38.4px */
}
Rem — стабильное масштабирование
/* Устанавливаем базовый размер */
html {
font-size: 16px;
}
/* Всё относительно корневого элемента */
.monitoring-panel {
font-size: 1rem; /* 16px */
padding: 1.5rem; /* 24px */
}
.alert-message {
font-size: 0.875rem; /* 14px */
margin: 1rem 0; /* 16px сверху и снизу */
}
/* Медиазапросы для адаптивности */
@media (max-width: 768px) {
html {
font-size: 14px; /* Все rem-единицы пропорционально уменьшатся */
}
}
Проценты — для гибкой раскладки
/* Классическая двухколоночная раскладка */
.admin-layout {
display: flex;
}
.sidebar {
width: 25%;
background: #f5f5f5;
min-height: 100vh;
}
.main-content {
width: 75%;
padding: 2rem;
}
/* Адаптивная таблица серверов */
.server-table {
width: 100%;
}
.server-table th,
.server-table td {
width: 20%; /* 5 колонок по 20% */
padding: 1rem;
}
Сравнительная таблица единиц измерения
| Единица | Тип | Относительно чего | Лучше всего для | Адаптивность |
|---|---|---|---|---|
| px | Абсолютная | Пиксель экрана | Иконки, границы, точные размеры | Низкая |
| em | Относительная | Размер шрифта родителя | Отступы, размеры текста | Высокая |
| rem | Относительная | Размер шрифта корня | Компоненты, модули | Очень высокая |
| % | Относительная | Родительский элемент | Ширина, высота, отступы | Высокая |
| vw/vh | Относительная | Размер экрана | Полноэкранные элементы | Очень высокая |
Viewport-единицы — для современных интерфейсов
/* Полноэкранный дашборд */
.fullscreen-dashboard {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
/* Адаптивный заголовок */
.hero-title {
font-size: 4vw; /* Размер шрифта = 4% от ширины экрана */
max-font-size: 48px; /* Ограничиваем максимальный размер */
min-font-size: 24px; /* Ограничиваем минимальный размер */
}
/* Боковая панель мониторинга */
.monitoring-sidebar {
width: 20vw;
min-width: 250px;
height: 100vh;
position: fixed;
top: 0;
left: 0;
}
Практические кейсы и антипаттерны
✅ Хорошие практики
/* Система единиц для админки */
:root {
--base-font-size: 16px;
--small-font: 0.875rem;
--large-font: 1.25rem;
--spacing-small: 0.5rem;
--spacing-medium: 1rem;
--spacing-large: 2rem;
}
/* Адаптивная типографика */
.responsive-text {
font-size: clamp(14px, 4vw, 24px);
line-height: 1.5;
}
/* Контейнер с максимальной шириной */
.content-container {
max-width: 1200px;
width: 90%;
margin: 0 auto;
padding: 0 1rem;
}
❌ Антипаттерны
/* Не делай так: смешивание единиц без логики */
.bad-example {
width: 300px;
padding: 2em;
margin: 5%;
font-size: 1.2rem;
border: 0.1em solid #ccc;
}
/* Проблема: каскадирование em */
.nested-problem {
font-size: 1.2em;
}
.nested-problem .child {
font-size: 1.2em; /* Будет 1.2 * 1.2 = 1.44em от базового */
}
/* Viewport-единицы для текста без ограничений */
.bad-viewport-text {
font-size: 5vw; /* На больших экранах будет гигантский */
}
Интересные факты и нестандартные применения
Вот несколько гиковских трюков, которые могут пригодиться:
Математические операции с CSS calc()
/* Смешиваем разные единицы */
.dynamic-width {
width: calc(100% - 250px); /* Полная ширина минус боковая панель */
}
/* Адаптивный размер шрифта */
.fluid-typography {
font-size: calc(16px + 0.5vw);
}
/* Центрирование с фиксированной шириной */
.centered-block {
width: 600px;
margin-left: calc(50% - 300px);
}
CSS-переменные для адаптивности
/* Адаптивная система отступов */
:root {
--spacing-unit: 1rem;
}
@media (max-width: 768px) {
:root {
--spacing-unit: 0.75rem;
}
}
.component {
padding: calc(var(--spacing-unit) * 2);
margin: var(--spacing-unit);
}
Автоматизация и скрипты
Для автоматизации работы с CSS-единицами можно использовать различные инструменты:
PostCSS плагины
/* Автоматическое добавление rem fallback */
npm install postcss-pxtorem
/* Настройка в postcss.config.js */
module.exports = {
plugins: [
require('postcss-pxtorem')({
rootValue: 16,
unitPrecision: 5,
propList: ['*'],
selectorBlackList: [],
replace: true,
mediaQuery: false,
minPixelValue: 0
})
]
}
Sass-функции для конвертации
/* Функция для конвертации px в rem */
@function px-to-rem($px-value, $base-font-size: 16px) {
@return ($px-value / $base-font-size) * 1rem;
}
/* Использование */
.element {
font-size: px-to-rem(18px); /* Результат: 1.125rem */
margin: px-to-rem(24px) px-to-rem(16px);
}
Современные CSS-единицы и поддержка браузеров
Новые единицы, которые стоит знать:
- ch — ширина символа “0” в текущем шрифте
- ex — высота символа “x” в текущем шрифте
- lh — высота строки элемента
- rlh — высота строки корневого элемента
/* Ограничение ширины текста для лучшей читаемости */
.readable-text {
max-width: 75ch; /* ~75 символов в строке */
}
/* Высота элемента на основе строк текста */
.text-block {
height: 5lh; /* Высота 5 строк */
}
Рекомендации по выбору единиц
Для разных задач используй разные единицы:
| Задача | Рекомендуемая единица | Альтернатива |
|---|---|---|
| Размер шрифта | rem, em | px для фиксированных элементов |
| Отступы и поля | rem, em | px для точных значений |
| Ширина контейнеров | %, vw | max-width в px/rem |
| Высота элементов | rem, vh | auto, px |
| Границы | px | rem для масштабируемых UI |
| Тени | px | rem для консистентности |
Интеграция с серверными технологиями
При разработке админок и дашбордов важно учитывать серверную часть:
/* CSS-переменные, которые можно изменять через JavaScript */
:root {
--server-status-ok: #28a745;
--server-status-warning: #ffc107;
--server-status-error: #dc3545;
}
/* Адаптивная таблица серверов */
.server-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
padding: 1rem;
}
.server-card {
border: 1px solid #e0e0e0;
border-radius: 0.5rem;
padding: 1.5rem;
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
Для тестирования адаптивности твоих админок можешь развернуть тестовый VPS на этом сервисе или использовать выделенный сервер для более серьёзных нагрузок.
Полезные ресурсы
Заключение и рекомендации
Правильный выбор единиц измерения в CSS — это не просто вопрос стилей, а важная часть архитектуры фронтенда. Для серверных администраторов, которые создают или поддерживают веб-интерфейсы, это критически важно.
Основные рекомендации:
- Используй rem для большинства размеров — это обеспечит консистентность и адаптивность
- Применяй px только для элементов, которые должны быть фиксированными (иконки, границы)
- Используй проценты для ширины контейнеров и адаптивных раскладок
- Viewport-единицы (vw, vh) отлично подходят для полноэкранных дашбордов
- Всегда тестируй на разных устройствах и размерах экрана
Помни: хорошая адаптивность интерфейса — это не роскошь, а необходимость. Администраторы работают с разных устройств, и твой мониторинговый дашборд должен быть одинаково удобен как на 27-дюймовом мониторе в дата-центре, так и на планшете в командировке.
В этой статье собрана информация и материалы из различных интернет-источников. Мы признаем и ценим работу всех оригинальных авторов, издателей и веб-сайтов. Несмотря на то, что были приложены все усилия для надлежащего указания исходного материала, любая непреднамеренная оплошность или упущение не являются нарушением авторских прав. Все упомянутые товарные знаки, логотипы и изображения являются собственностью соответствующих владельцев. Если вы считаете, что какой-либо контент, использованный в этой статье, нарушает ваши авторские права, немедленно свяжитесь с нами для рассмотрения и принятия оперативных мер.
Данная статья предназначена исключительно для ознакомительных и образовательных целей и не ущемляет права правообладателей. Если какой-либо материал, защищенный авторским правом, был использован без должного упоминания или с нарушением законов об авторском праве, это непреднамеренно, и мы исправим это незамедлительно после уведомления. Обратите внимание, что переиздание, распространение или воспроизведение части или всего содержимого в любой форме запрещено без письменного разрешения автора и владельца веб-сайта. Для получения разрешений или дополнительных запросов, пожалуйста, свяжитесь с нами.
More stories
