Единицы измерения в CSS: px, em, rem, %, vw, vh, vmin, vmax

Пиксели (px): "Строительные кирпичики" CSS 🧱

Пиксели (px) — абсолютная единица измерения, жёстко привязанная к физическим точкам на экране.

h1 {
  font-size: 24px; /* Фиксированный размер */
  padding: 16px;   /* Независимо от контекста */
}

💡 Когда использовать? Для границ (border), теней (box-shadow) или когда нужна точность (например, иконки). Но будь осторожен: px не адаптивны!

em и rem: Гибкость через наследование 🌱

em — относительная единица к родительскому размеру шрифта

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* 30px (20px * 1.5) */
  margin: 2em;      /* 60px (30px * 2)! */
}

rem — относительная единица к корневому элементу (html)

html {
  font-size: 16px;
}

.component {
  font-size: 1.5rem; /* 24px (16px * 1.5) */
  padding: 2rem;     /* 32px (16px * 2) */
}

🔥 Лайфхак от Данилы Бежина (https://www.youtube.com/@DanilaBezhin): Используй rem для основных размеров, а em — для локальных адаптивных изменений!

Проценты (%): Отношение к родителю 📊

Работает по-разному в зависимости от свойства:

.container {
  width: 500px;
}

.box {
  width: 50%;    /* 250px */
  height: 100%;  /* Зависит от явной высоты родителя */
}

⚠️ Важно! Для font-size % берётся от родительского font-size, а для line-height — от текущего размера шрифта.

Viewport-единицы: Размеры окна браузера 🌐

.hero-section {
  height: 100vh;       /* На всю высоту экрана */
  font-size: calc(1rem + 1vw); /* Гибкий шрифт! */
}

Бонус: Как выбрать единицу? 🧩

1. Адаптивность: rem, vw, %
2. Точность: px (но не для шрифтов!)
3. Локальная гибкость: em
4. Fullscreen-эффекты: vh, vmin

🎨 Совет: Комбинируй единицы! Например, grid-template-columns: 250px 1fr или font-size: clamp(1rem, 2.5vw, 2rem).

Практика: Создаём адаптивную кнопку 🚀

.button {
  font-size: 1rem;           /* Базовый размер */
  padding: 0.75em 1.5em;     /* Относительно шрифта */
  border-radius: 0.5em;      /* Плавные углы */
  width: min(90%, 400px);    /* Гибкая ширина */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Фиксированные px */
}

@media (max-width: 600px) {
  .button {
    font-size: 1.2rem;       /* Увеличиваем на мобильных */
  }
}

Итог: Сила в комбинации! 💪

Запомни:

• px — для точности (но не везде)
• rem — твой лучший друг для адаптивности
• em — мощный инструмент в умелых руках
• vw/vh — магия полноэкранных интерфейсов

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