Загрузка...
Полный справочник по единицам CSS
Этот справочник предоставляет разработчикам полный обзор всех единиц измерения CSS, включая абсолютные, относительные, единицы окна просмотра, контейнеров, проценты, углы, время, частоту, разрешение, цветовые и функциональные единицы. Руководство предназначено для быстрого поиска нужной единицы и её применения в реальных проектах: адаптивных интерфейсах, типографике, гибких сетках и анимациях. Все единицы представлены с точными значениями, примерами кода и поддержкой браузеров. Организация справочника по категориям позволяет быстро ориентироваться и использовать единицы максимально эффективно в процессе разработки.
📊 Absolute Length Units
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| px | Пиксели - пиксели устройства | 1px = 1/96 inch | width: 300px | Экраны, границы, тени | Все браузеры |
| cm | Сантиметры | 1cm = 37.8px | margin: 2cm | Печатные стили, физические размеры | Все браузеры |
| mm | Миллиметры | 1mm = 3.78px | border: 1mm solid | Печать, точные измерения | Все браузеры |
| in | Дюймы | 1in = 96px | page-break-after: 2in | Печать, большие размеры | Все браузеры |
| pt | Пункты | 1pt = 1.33px | font-size: 12pt | Типографика, печать | Все браузеры |
| pc | Пики | 1pc = 16px | line-height: 1.5pc | Типографика печати, ширина колонок | Все браузеры |
| Q | Четверть миллиметра | 1Q = 0.25mm | margin: 4Q | Печать, очень точные измерения | Современные браузеры |
📊 Relative Length Units
| Unit | Description | Relative To | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| em | Единица em | Размер шрифта родителя | font-size: 1.2em | Типографика, отступы относительно текста | Все браузеры |
| rem | Корневая em | Размер шрифта корня документа | margin: 2rem | Последовательные отступы, масштабируемые макеты | IE9+ |
| ex | Высота x | Высота буквы 'x' текущего шрифта | line-height: 2ex | Типографика, вертикальное выравнивание | Все браузеры |
| ch | Ширина символа | Ширина символа '0' текущего шрифта | width: 40ch | Контейнеры текста, моноширинные макеты | IE9+ |
| cap | Высота заглавных | Высота заглавных букв текущего шрифта | margin-top: 1cap | Типографика, вертикальные отступы | Современные браузеры |
| ic | Идеографический символ | Ширина символа CJK | width: 20ic | Восточноазиатская типографика | Современные браузеры |
| lh | Высота строки | Высота строки элемента | margin: 1lh | Вертикальный ритм, отступы | Современные браузеры |
| rlh | Высота строки корня | Высота строки корневого элемента | padding: 0.5rlh | Согласованный вертикальный ритм | Современные браузеры |
📊 Viewport Units
| Unit | Description | Calculation | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| vw | Ширина окна | 1% ширины окна | width: 50vw | Full-width макеты, адаптивный дизайн | IE9+ |
| vh | Высота окна | 1% высоты окна | height: 100vh | Full-height секции, hero-блоки | IE9+ |
| vmin | Минимум окна | 1% меньшей стороны окна | font-size: 4vmin | Квадратные элементы, адаптивная типографика | IE9+ |
| vmax | Максимум окна | 1% большей стороны окна | width: 50vmax | Адаптивные макеты | IE9+ |
| vi | Inline viewport | 1% вдоль inline направления | padding: 2vi | Логические свойства, международные макеты | Современные браузеры |
| vb | Block viewport | 1% вдоль block направления | margin: 3vb | Логические свойства, режимы письма | Современные браузеры |
| dvw | Динамическая ширина окна | 1% динамической ширины | width: 100dvw | Mobile layouts, адресная строка | Современные браузеры |
| dvh | Динамическая высота окна | 1% динамической высоты | height: 100dvh | Full-height UI на мобильных | Современные браузеры |
| lvw | Большая ширина окна | 1% большой ширины | max-width: 90lvw | Mobile layouts, видимый UI | Современные браузеры |
| lvh | Большая высота окна | 1% большой высоты | min-height: 100lvh | Максимальная высота на мобильных | Современные браузеры |
| svw | Маленькая ширина окна | 1% маленькой ширины | width: 100svw | Mobile layouts, скрытый UI | Современные браузеры |
| svh | Маленькая высота окна | 1% маленькой высоты | height: 100svh | Минимальная высота на мобильных | Современные браузеры |
📊 Container Query Units
| Unit | Description | Calculation | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| cqw | Ширина контейнера | 1% ширины контейнера | width: 50cqw | Адаптивный дизайн на основе контейнера | Современные браузеры |
| cqh | Высота контейнера | 1% высоты контейнера | height: 80cqh | Контейнерные макеты | Современные браузеры |
| cqi | Inline контейнера | 1% inline размера контейнера | padding: 2cqi | Логические контейнерные макеты | Современные браузеры |
| cqb | Block контейнера | 1% block размера контейнера | margin: 1cqb | Размеры блока | Современные браузеры |
| cqmin | Минимум контейнера | 1% меньшей стороны контейнера | font-size: 3cqmin | Типографика на основе контейнера | Современные браузеры |
| cqmax | Максимум контейнера | 1% большей стороны контейнера | border-radius: 2cqmax | Стилизация контейнера | Современные браузеры |
📊 Percentage Units
| Unit | Description | Relative To | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| % | Процент | Соответствующая родительская величина | width: 50% | Гибкие макеты, адаптивный дизайн | Все браузеры |
📊 Angle Units
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| deg | Градусы | 360deg = полный круг | transform: rotate(45deg) | Вращения, градиенты | Все браузеры |
| grad | Градианы | 400grad = полный круг | transform: rotate(100grad) | Математика, градиенты | Все браузеры |
| rad | Радианы | 2π rad = полный круг | transform: rotate(1.57rad) | Математические преобразования | Все браузеры |
| turn | Обороты | 1turn = полный круг | transform: rotate(0.25turn) | Интуитивные вращения, анимации | IE9+ |
📊 Time Units
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| s | Секунды | 1s = 1000ms | transition-duration: 2s | Анимации, переходы | Все браузеры |
| ms | Миллисекунды | 1000ms = 1s | animation-delay: 500ms | Точное время, быстрые анимации | Все браузеры |
📊 Frequency Units
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| Hz | Герц | 1Hz = 1 цикл/сек | Не используется в CSS | Аудио свойства (будущее) | Ограничено |
| kHz | Килогерц | 1kHz = 1000Hz | Не используется в CSS | Аудио свойства (будущее) | Ограничено |
📊 Resolution Units
| Unit | Description | Definition | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| dpi | Точек на дюйм | Физические точки на дюйм | @media (min-resolution: 300dpi) | Дисплеи High-DPI, печать | IE9+ |
| dpcm | Точек на см | Физические точки на см | @media (min-resolution: 118dpcm) | Метрика, печать | IE9+ |
| dppx | Точек на px | Пиксели устройства на CSS пиксель | @media (min-resolution: 2dppx) | Retina дисплеи, DPR | IE9+ |
| x | Alias для dppx | То же, что dppx | @media (min-resolution: 2x) | Retina дисплеи, упрощенный синтаксис | Современные браузеры |
📊 Color Units
| Unit | Description | Format | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| \# | Hex | #RRGGBB или #RGB | color: #ff0000 | Стандартная запись цвета | Все браузеры |
| rgb() | RGB | rgb(r, g, b) | color: rgb(255, 0, 0) | Точный контроль цвета | Все браузеры |
| rgba() | RGB с alpha | rgba(r, g, b, a) | background: rgba(255, 0, 0, 0.5) | Прозрачные цвета | IE9+ |
| hsl() | HSL | hsl(h, s%, l%) | color: hsl(0, 100%, 50%) | Интуитивный выбор цвета | IE9+ |
| hsla() | HSL с alpha | hsla(h, s%, l%, a) | background: hsla(0, 100%, 50%, 0.5) | Прозрачные HSL цвета | IE9+ |
| hwb() | HWB | hwb(h w% b%) | color: hwb(0 0% 0%) | Альтернативная модель цвета | Современные браузеры |
| lab() | Lab | lab(l a b) | color: lab(50% 20 -30) | Перцептуальная цветовая модель | Современные браузеры |
| lch() | LCH | lch(l c h) | color: lch(50% 40 180) | Цилиндрическая Lab модель | Современные браузеры |
| oklab() | OKLab | oklab(l a b) | color: oklab(0.5 0.2 -0.3) | Улучшенная Lab модель | Современные браузеры |
| oklch() | OKLCH | oklch(l c h) | color: oklch(0.5 0.4 180) | Улучшенная LCH модель | Современные браузеры |
| color() | Color | color(space r g b) | color: color(display-p3 1 0 0) | Широкий цветовой gamut | Современные браузеры |
📊 Function Units
| Unit | Description | Calculation | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| calc() | Математический расчет | Сочетает разные единицы | width: calc(100% - 20px) | Смешанные вычисления | IE9+ |
| min() | Минимум | Возвращает минимальное значение | width: min(100px, 50%) | Ограничения в адаптивности | Современные браузеры |
| max() | Максимум | Возвращает максимальное значение | width: max(200px, 50%) | Минимальные ограничения | Современные браузеры |
| clamp() | Ограничение | clamp(min, preferred, max) | font-size: clamp(1rem, 4vw, 2rem) | Адаптивный размер с пределами | Современные браузеры |
| attr() | Атрибут | Использует HTML атрибут | width: attr(data-width px) | Динамические значения из HTML | Ограниченно |
| var() | CSS переменная | Использует custom property | color: var(--main-color) | Переменные CSS | IE11+ (частично), Современные браузеры |
📊 Grid Units
| Unit | Description | Definition | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| ракция | Доля доступного пространства | grid-template-columns: 1fr 2fr | CSS Grid, гибкие колонки | IE10+ (-ms-) |
Code Example 15
css
CSS Code
/* Абсолютные и относительные единицы */
.container {
width: calc(100vw - 2rem);
max-width: 1200px;
padding: 1em 5%;
}
/* Адаптивная типографика с clamp */
.heading {
font-size: clamp(1.5rem, 4vw, 3rem);
line-height: 1.2;
margin-bottom: 1em;
}
/* Единицы viewport для full-screen макетов */
.hero {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
}
/* Container query units для компонентов */
.card {
width: 100cqw;
padding: 2cqi;
font-size: clamp(0.875rem, 3cqw, 1.25rem);
}
/* CSS Grid с fr единицами */
.grid-layout {
display: grid;
grid-template-columns: 200px 1fr 2fr;
gap: 1rem;
}- Используйте относительные единицы (rem, em, %) для масштабируемых и доступных интерфейсов.
- Предпочитайте rem вместо em для единообразного отступа по всему макету.
- Используйте viewport units (vw, vh) с осторожностью — они не учитывают скроллбар.
- clamp() полезен для плавной адаптивной типографики.
- Смешивайте единицы с calc() для сложных адаптивных макетов.
- px оптимален для границ, теней и декоративных элементов.
- Тестируйте container query units в поддерживаемых браузерах.
- fr в CSS Grid обеспечивает гибкие и интуитивные колонки.
- Следите за поддержкой новых единиц, таких как dvh, lvh, svh.
- Используйте логические единицы (vi, vb) для международных макетов.
- HSL/HSB упрощает управление цветом и темизацию.
- Всегда предоставляйте fallback для новых единиц в старых браузерах.
- Тестируйте комбинации единиц на разных устройствах и разрешениях экрана.
🧠 Проверьте Свои Знания
Готов к Началу
Reference Knowledge Check
Проверьте свои знания о единицах CSS.
3
Вопросы
70%
Для Прохождения
∞
Время
∞
Попытки
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху