Когда брать абсолютные величины а когда относительные ?
Спросят с вероятностью 7%

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

Абсолютные величины (например, px, pt, cm, in)

Имеют фиксированные размеры и не зависят от других элементов или размеров экрана. Они всегда остаются одинаковыми, независимо от контекста.

Когда использовать:

1️⃣Пиксели (`px`):
✅Точные размеры: Когда вам нужно задать точные размеры элементов, например, для пиксельной точности в дизайне.
✅Фиксированные элементы: Для элементов, размеры которых не должны изменяться в зависимости от экрана или родительского элемента (например, логотипы или иконки).
✅Маленькие декоративные элементы: Когда размеры элементов настолько малы, что относительные единицы могут привести к неконтролируемому результату.

.logo {
  width: 100px;
  height: 50px;
}

Относительные величины (например, %, em, rem, vw, vh)

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

Когда использовать:

1️⃣Проценты (`%`):
✅Адаптивные макеты: Когда нужно, чтобы элемент занимал определенный процент от размера родительского элемента.
✅Контейнеры и блоки: Для ширины и высоты блоков, которые должны изменяться вместе с размерами родителя.

.container {
  width: 80%;
  height: 50%;
}

2️⃣Эм (`em`):
✅Шрифты: Когда нужно задавать размер шрифта относительно размера шрифта родителя.
✅Внутренние отступы и поля: Для создания элементов, которые масштабируются вместе с текстом.

.text {
  font-size: 1.2em;
  margin: 1em;
}

3️⃣Рем (`rem`):
✅Глобальная консистентность: Когда нужно задавать размер относительно корневого элемента (обычно <html>), что обеспечивает более предсказуемое масштабирование.
✅Шрифты и отступы: Для элементов, которые должны быть пропорциональны базовому размеру шрифта

body {
  font-size: 16px;
}

.header {
  font-size: 2rem; /* 32px */
  margin: 1rem;    /* 16px */
}

4️⃣Вьюпорт (`vw`, `vh`):
✅Адаптивные размеры: Когда размеры элементов должны быть пропорциональны размеру вьюпорта (окна браузера).
✅Фоновые изображения и видео: Для элементов, которые должны занимать определенный процент от экрана.

.hero {
  width: 100vw;
  height: 100vh;
}

Комбинированное использование

Иногда можно комбинировать абсолютные и относительные единицы для достижения наилучшего результата.

.container {
  width: 80%;  /* Относительная ширина */
  padding: 20px; /* Абсолютный внутренний отступ */
}

.text {
  font-size: 1.5rem; /* Относительный размер шрифта */
  margin: 2em; /* Относительный внешний отступ */
}

Абсолютные величины (px) используются для точных размеров и фиксированных элементов. Относительные величины (%, em, rem, vw, vh) подходят для адаптивных макетов и элементов, которые должны изменяться в зависимости от размеров родителя или вьюпорта.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых