Можно ли комбинировать единицы измерения в CSS

«Можно ли комбинировать единицы измерения в CSS» — вопрос из категории CSS, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Да, можно комбинировать разные единицы измерения в CSS. Например, можно смешивать px, em, rem, %, vh, vw и другие. Это полезно для создания гибких и адаптивных интерфейсов.

Пример:

.container {
  width: 80%; /* процент от родителя */
  padding: 20px; /* фиксированные пиксели */
  font-size: 1.2rem; /* относительные единицы */
  margin: 2em auto; /* комбинация em и auto */
}

Важно учитывать контекст:

  • Проценты рассчитываются от родителя
  • em зависит от текущего font-size
  • rem зависит от корневого font-size
  • Viewport-единицы (vh, vw) зависят от размера окна браузера

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