Skip to main content

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

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

  • Абсолютные единицы (например, px, in) используются для фиксированных размеров.
  • Относительные единицы (например, em, rem, %, vw, vh) помогают создавать адаптивные и гибкие макеты.
  • Специальные единицы (например, deg, s, Hz) используются для трансформаций, анимаций и других специфических задач.

Абсолютные​

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

Основные абсолютные единицы:

  • px (пиксели):
    • Наиболее распространенная единица.
    • 1px соответствует одному пикселю на экране.
    • Пример: width: 200px;.
  • in (дюймы):
    • 1in = 2.54cm.
    • Используется редко, в основном для печати.
    • Пример: width: 2in;.
  • cm (сантиметры):
    • Используется для печати.
    • Пример: width: 5cm;.
  • mm (миллиметры):
    • Используется для печати.
    • Пример: width: 50mm;.
  • pt (пункты):
    • 1pt = 1/72 дюйма.
    • Часто используется для печати.
    • Пример: font-size: 12pt;.
  • pc (пики):
    • 1pc = 12pt.
    • Используется редко.
    • Пример: font-size: 1.5pc;.

Относительные​

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

Основные относительные единицы:

  • em:
    • Зависит от размера шрифта текущего элемента.
    • 1em = текущий размер шрифта.
    • Если размер шрифта элемента равен 16px, то 2em = 32px.
    • Пример: font-size: 1.5em;.
  • rem (root em):
    • Зависит от размера шрифта корневого элемента (<html>).
    • 1rem = размер шрифта корневого элемента (обычно 16px).
    • Пример: font-size: 1.2rem;.
  • % (проценты):
    • Зависит от размера родительского элемента.
    • Пример: width: 50%; (ширина элемента будет 50% от ширины родителя).
  • vw (viewport width):
    • 1vw = 1% ширины области просмотра (viewport).
    • Пример: width: 50vw; (ширина элемента будет 50% от ширины окна браузера).
  • vh (viewport height):
    • 1vh = 1% высоты области просмотра (viewport).
    • Пример: height: 100vh; (высота элемента будет равна высоте окна браузера).
  • vmin:
    • 1vmin = 1% от меньшего из размеров (ширины или высоты) области просмотра.
    • Пример: font-size: 5vmin;.
  • vmax:
    • 1vmax = 1% от большего из размеров (ширины или высоты) области просмотра.
    • Пример: font-size: 5vmax;.
  • ch:
    • Зависит от ширины символа "0" текущего шрифта.
    • Пример: width: 20ch; (ширина элемента будет равна ширине 20 символов "0").
  • ex:
    • Зависит от высоты символа "x" текущего шрифта.
    • Используется редко.
    • Пример: font-size: 2ex;.

Специальные единицы измерения​

Эти единицы используются для специфических задач, таких как работа с цветами или углами.

  • deg (градусы):
    • Используется для задания углов (например, в трансформациях).
    • Пример: transform: rotate(45deg);.
  • rad (радианы):
    • Используется для задания углов в радианах.
    • Пример: transform: rotate(1rad);.
  • turn (обороты):
    • 1turn = 360deg.
    • Пример: transform: rotate(0.5turn);.
  • s (секунды) и ms (миллисекунды):
    • Используются для задания времени (например, в анимациях).
    • Пример: transition: all 0.5s;.
  • Hz (герцы) и kHz (килогерцы):
    • Используются для задания частоты (например, в анимациях).
    • Пример: animation: pulse 2Hz;.

Единицы для работы с цветами​

  • rgb() и rgba():
    • Задают цвет в формате RGB (Red, Green, Blue) с возможностью указания прозрачности.
    • Пример: color: rgba(255, 0, 0, 0.5);.
  • hsl() и hsla():
    • Задают цвет в формате HSL (Hue, Saturation, Lightness) с возможностью указания прозрачности.
    • Пример: background-color: hsla(120, 100%, 50%, 0.3);.
  • Шестнадцатеричные значения:
    • Задают цвет в формате HEX.
    • Пример: color: #ff0000;.

Когда какие единицы использовать?​

  • px: Для фиксированных размеров (например, границы, тени).
  • em и rem: Для размеров шрифтов и отступов, чтобы обеспечить масштабируемость.
  • %: Для создания адаптивных макетов (например, ширина элемента).
  • vw и vh: Для создания полноэкранных блоков или адаптивных шрифтов.
  • ch: Для работы с текстом (например, ограничение ширины текстового поля).
  • deg, rad, turn: Для трансформаций и анимаций.

🚀 Источник: DeepSeek