CSS-анімації та адаптивність

Media queries та адаптивний дизайн

📖 Теорія

Mobile-first підхід: спочатку стилі для мобільних, потім для більших екранів.

/ Базові стилі — мобільний /

💡 Приклад коду

.container { padding: 16px; }
.grid { display: flex; flex-direction: column; gap: 16px; }

/* Планшет 768px+ */
@media (min-width: 768px) {
  .container { padding: 24px; }
  .grid { flex-direction: row; flex-wrap: wrap; }
  .grid > * { flex: 0 0 calc(50% - 8px); }
}

/* Десктоп 1024px+ */
@media (min-width: 1024px) {
  .container { max-width: 1200px; margin: 0 auto; }
  .grid > * { flex: 0 0 calc(33.333% - 11px); }
}

/* Темна тема */
@media (prefers-color-scheme: dark) {
  body { background: #1a1a1a; color: #f0f0f0; }
}

/* viewport meta у HTML <head> — обов'язково! */
<meta name="viewport" content="width=device-width, initial-scale=1.0">

← Попередній урок Наступний урок →