логотип PurpleSchool
Иконка входа
Вход
логотип PurpleSchool

Единицы измерения в CSS. Полное руководство с примерами

Автор

Дмитрий Нечаев

В CSS существует множество единиц измерения, которые можно использовать для задания размеров, расстояний, углов и времени. Помимо широко используемых пикселей и процентов, есть и более экзотичные единицы измерения, такие как сантиметры, градусы и секунды. В этой статье мы рассмотрим различные единицы измерения в CSS, приведём примеры их использования и обсудим, когда и как их лучше применять.

Основные типы единиц измерения в CSS

1. Абсолютные единицы измерения

Абсолютные единицы измерения имеют фиксированные значения и не зависят от других элементов на странице. Они включают:

  • px (пиксели)
  • cm (сантиметры)
  • mm (миллиметры)
  • in (дюймы)
  • pt (пункты)
  • pc (пика)

Пример использования абсолютных единиц измерения

.element {
    width: 5cm; /* ширина в сантиметрах */
    height: 50mm; /* высота в миллиметрах */
    margin: 2in; /* отступ в дюймах */
    font-size: 12pt; /* размер шрифта в пунктах */
}

2. Относительные единицы измерения

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

  • % (проценты)
  • em (эм)
  • rem (рутовый эм)
  • vw (процент ширины окна просмотра)
  • vh (процент высоты окна просмотра)
  • vmin (минимальный процент ширины или высоты окна просмотра)
  • vmax (максимальный процент ширины или высоты окна просмотра)

Пример использования относительных единиц измерения

.container {
    width: 50%; /* ширина 50% от родительского элемента */
}

.text {
    font-size: 2em; /* размер шрифта в два раза больше, чем у родителя */
}

.root-text {
    font-size: 16px;
}

.child-text {
    font-size: 1rem; /* размер шрифта равен 16px */
}

.full-screen {
    width: 100vw; /* ширина 100% от ширины окна */
    height: 100vh; /* высота 100% от высоты окна */
}

3. Единицы измерения углов

Для задания углов вращения или наклона в CSS используются следующие единицы:

  • deg (градусы)
  • rad (радианы)
  • grad (грады)
  • turn (полные обороты)

Пример использования единиц измерения углов

.element {
    transform: rotate(45deg); /* поворот на 45 градусов */
}

.element-rad {
    transform: rotate(0.785rad); /* поворот на 0.785 радиан */
}

.element-grad {
    transform: rotate(50grad); /* поворот на 50 градов */
}

.element-turn {
    transform: rotate(0.5turn); /* поворот на пол-оборота */
}

4. Единицы измерения времени

Для задания продолжительности анимаций и переходов в CSS используются следующие единицы:

  • s (секунды)
  • ms (миллисекунды)

Пример использования единиц измерения времени

.element {
    transition: all 0.5s ease-in-out; /* переход длится 0.5 секунд */
}

.animation {
    animation-duration: 2000ms; /* продолжительность анимации 2000 миллисекунд */
}

5. Другие единицы измерения

CSS также поддерживает другие единицы измерения, такие как:

  • ch (ширина символа "0")
  • ex (высота символа "x")
  • cap (высота заглавных букв)
  • ic (ширина идеографического символа)
  • lh (высота строки)
  • rlh (высота строки корневого элемента)
  • q (четверть миллиметра)

Пример использования других единиц измерения

.element {
    width: 10ch; /* ширина элемента равна ширине 10 символов "0" */
    height: 2ex; /* высота элемента равна высоте 2 символов "x" */
    line-height: 1.5lh; /* высота строки равна 1.5 высоты строки */
    padding: 1q; /* отступ в 1 четверть миллиметра */
}

Когда и как использовать различные единицы измерения

Абсолютные единицы измерения

Абсолютные единицы измерения, такие как cm, mm, in, pt и pc, полезны для печатных материалов, где размеры должны быть точными и постоянными. Однако в веб-дизайне они используются реже, так как экраны устройств могут иметь разные разрешения и размеры.

Относительные единицы измерения

Относительные единицы, такие как %, em, rem, vw, vh, vmin и vmax, более гибкие и адаптивные. Они позволяют создавать адаптивные макеты, которые подстраиваются под размеры окна просмотра и устройства пользователя.

Единицы измерения углов и времени

Единицы измерения углов (deg, rad, grad, turn) и времени (s, ms) широко используются в анимациях и переходах для создания динамичных и интерактивных эффектов.

Другие единицы измерения

Другие единицы измерения, такие как ch, ex, lh, и q, полезны для точной настройки размеров и отступов в зависимости от контекста и содержимого.

Заключение

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

Карта развития разработчика

Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile