Viewport и media queries: адаптация под экраны разных устройств

Почему адаптация под экраны — это важно?

Представьте, что ваш сайт — это вода. На большом экране (океан) она растекается широко, на телефоне (стакан) — принимает его форму. Без адаптации сайт будет выглядеть как океан, втиснутый в стакан: мелко, нечитабельно, с горизонтальным скроллом.

Решение:
- viewport — определяет «правила игры» для масштабирования.
- media queries — дают контроль над стилями на разных устройствах.

Волшебная строка: `<meta name="viewport">`

Без этого тега мобильные браузеры будут имитировать десктопный экран, сжимая всё в маленькое нечитаемое пятно.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Разберём атрибуты:
- width=device-width — ширина области просмотра равна ширине устройства.
- initial-scale=1.0 — масштаб по умолчанию 100%, без зума.

💡 Добавляйте этот тег в <head> всегда. Без него адаптивный дизайн не работает корректно!

Media Queries: CSS-детективы

Media queries — это условия в CSS, которые проверяют характеристики устройства (ширину, ориентацию, разрешение) и применяют стили только если условие истинно.

Базовая структура

@media (условие) {
  /* Стили, которые сработают при выполнении условия */
}

Пример: Меняем цвет фона на маленьких экранах

body {
  background-color: lightblue;
}

@media (max-width: 600px) {
  body {
    background-color: coral; /* Только если ширина ≤ 600px */
  }
}

Точки останова (Breakpoints)

Это «переломные моменты», где дизайн меняется. Традиционно используют ширины:

Устройство	Breakpoint (max-width)
Телефоны (портрет)	480px – 600px
Планшеты (портрет)	601px – 768px
Планшеты (ландшафт)	769px – 1024px
Десктопы	1025px+

🛠️ Совет: Начинайте с mobile-first (пишите стили для маленьких экранов, а затем расширяйте для больших через min-width). Так код чище!

/* Mobile-first подход */  
body {
  font-size: 14px; 
}

@media (min-width: 768px) {
  body {
    font-size: 16px; /* Только на экранах ≥ 768px */
  }
}

Практика: Адаптивное меню

Допустим, на десктопе меню горизонтальное, а на телефоне — вертикальное с кнопкой «бургер».

HTML:

<nav class="navbar">
  <button class="menu-toggle">☰</button>
  <ul class="menu">
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
  </ul>
</nav>

CSS (упрощённый пример):

.menu-toggle {
  display: none; /* Скрыто на десктопе */
}

@media (max-width: 600px) {
  .menu-toggle {
    display: block; /* Показываем на телефонах */
  }
  .menu {
    display: none; /* Меню скрыто по умолчанию */
  }
  .menu.active {
    display: block; /* Открыто при клике */
  }
}

🔥 Для бургер-меню понадобится JS (но это уже тема другого урока).

Проверяем на реальных устройствах

1. DevTools в браузере (Chrome/Firefox):

Откройте панель разработчика (F12).
Кликните на иконку телефона/планшета.
Тестируйте разные разрешения.

2. Настоящие устройства:

Откройте сайт на телефоне, планшете, ноутбуке.
Проверьте, нет ли горизонтального скролла.

Итоги

<meta viewport> — фундамент адаптивности.
Media queries — гибкие условия для стилей.
Mobile-first — пишите CSS от меньшего к большему.
Тестируйте на разных экранах!

Теперь ваш сайт будет идеально выглядеть и на огромном мониторе, и в маленьком телефоне! 🎉