← Назад ко всем вопросам

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

1️⃣ Как кратко ответить

В CSS используются абсолютные и относительные единицы измерения. Абсолютные единицы, такие как пиксели (px), сантиметры (cm), миллиметры (mm), дюймы (in), точки (pt) и пика (pc), имеют фиксированный размер. Относительные единицы, такие как проценты (%), em, rem, vw, vh, vmin и vmax, зависят от других значений, например, от размера шрифта родительского элемента или размеров окна браузера.

2️⃣ Подробное объяснение темы

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

Абсолютные единицы

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

  • px (пиксели): Основная единица измерения в веб-дизайне. 1px соответствует одному физическому пикселю на экране.
  • cm (сантиметры), mm (миллиметры), in (дюймы): Используются для печатных материалов. 1in = 2.54cm = 25.4mm.
  • pt (точки), pc (пика): Традиционные типографские единицы. 1pt = 1/72 дюйма, 1pc = 12pt.

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

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

  • % (проценты): Зависит от родительского элемента. Например, ширина: 50% означает, что элемент займет 50% ширины родителя.

  • em: Зависит от размера шрифта родительского элемента. 1em равен текущему размеру шрифта. Если размер шрифта родителя 16px, то 1em = 16px.

  • rem (root em): Зависит от размера шрифта корневого элемента (обычно <html>). Это упрощает управление размерами, так как все элементы будут масштабироваться относительно одного значения.

  • vw (viewport width), vh (viewport height): Зависит от размеров окна браузера. 1vw равен 1% ширины окна, 1vh — 1% высоты.

  • vmin, vmax: Зависит от меньшего или большего значения между шириной и высотой окна. 1vmin — 1% от меньшего размера, 1vmax — 1% от большего.

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

body {
  font-size: 16px; /* Устанавливаем базовый размер шрифта */
}
​
.container {
  width: 50vw; /* Ширина контейнера равна 50% ширины окна */
  padding: 2em; /* Отступы внутри контейнера равны 2 размерам шрифта родителя */
}
​
.text {
  font-size: 1.5rem; /* Размер шрифта равен 1.5 от базового размера шрифта корневого элемента */
  margin-bottom: 10%; /* Нижний отступ равен 10% от высоты родительского элемента */
}
  • body устанавливает базовый размер шрифта в 16 пикселей.
  • .container имеет ширину, равную половине ширины окна браузера, и внутренние отступы, равные двум размерам шрифта родителя.
  • .text имеет размер шрифта, равный 1.5 от базового размера шрифта корневого элемента, и нижний отступ, равный 10% от высоты родительского элемента.

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

Тема: CSS
Стадия: Tech

🔒 Подпишись на бусти автора и стань Алигатором, чтобы получить полный доступ к функционалу сайта и отслеживать свой прогресс!

Твои заметки