Адаптивность

💡 Объяснение

Сайт на любом экране

Сайт открывают на огромных мониторах, ноутбуках, планшетах и телефонах шириной всего 360 пикселей. Больше половины посетителей приходят с телефонов! Адаптивный (responsive) сайт перестраивается под размер экрана: на компьютере карточки стоят в ряд, на телефоне — друг под другом, меню складывается, текст остаётся читаемым без увеличения пальцами.

Шаг 1. Тег viewport

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

Этот тег пишется в head каждой страницы. Без него телефон «притворяется» компьютером шириной около 980 пикселей и показывает уменьшенную копию сайта с крошечными буквами. Тег говорит: «ширина страницы = ширина экрана устройства, масштаб 1».

Шаг 2. Гибкие размеры

Фиксированная ширина width: 900px на телефоне шириной 360px вызовет горизонтальную прокрутку. Поэтому используем относительные единицы:

• % — процент от ширины родителя: width: 50%;
• rem — от базового размера шрифта (обычно 16px): padding: 1.5rem = 24px;
• vw и vh — проценты от ширины и высоты окна: 100vh — на весь экран по высоте;
• fr — доли в Grid.

Золотое правило контейнера:

.container {
  width: 100%;
  max-width: 1000px;   /* на большом экране не шире 1000px */
  margin: 0 auto;      /* по центру */
  padding: 0 16px;     /* отступы от краёв телефона */
}
img {
  max-width: 100%;     /* картинки не вылезают за экран */
  height: auto;
}

Шаг 3. Медиазапросы

Медиазапрос — это условие «если экран такой-то, примени эти стили»:

@media (max-width: 600px) {
  .cards {
    flex-direction: column;
  }
  h1 {
    font-size: 1.5rem;
  }
}

Читается так: «Если ширина окна не больше 600 пикселей, то карточки встают в колонку, а заголовок уменьшается». На широком экране правила внутри @media просто игнорируются.

• max-width: 600px — «до 600px» (телефоны);
• min-width: 900px — «от 900px» (компьютеры);
• можно объединять: @media (min-width: 601px) and (max-width: 900px) — планшеты.

Точки, где меняется раскладка, называются брейкпоинтами (breakpoints). Популярные: 600px и 900px. Но лучше ориентироваться не на конкретные устройства, а на свой дизайн: сужай окно и ставь брейкпоинт там, где раскладка начинает «ломаться».

Порядок в CSS

Медиазапросы пишут в конце файла стилей. Внутри @media — только то, что должно измениться, а не все стили заново. Помни про каскад: правило, написанное ниже, побеждает при равной силе селектора.

Что обычно меняют на телефоне

• Ряды → колонки: flex-direction: column или grid-template-columns: 1fr.
• Меню: пункты в колонку или перенос с flex-wrap: wrap.
• Размер заголовков — меньше; основной текст — не мельче 16px.
• Отступы — меньше, чтобы не тратить драгоценную ширину.
• Второстепенное можно скрыть: display: none (но не прячь важное!).
• Кнопки и ссылки — крупнее, не меньше 44px, чтобы попадать пальцем.

Как проверять

1. В браузере нажми F12, затем значок телефона (Ctrl+Shift+M) — режим устройства. Выбери, например, iPhone или задай ширину 360px.
2. Или просто сужай окно браузера, перетаскивая край.
3. В нашем редакторе есть кнопка «📱 Телефон».
4. Лучшая проверка — открыть сайт на настоящем телефоне.

Главный признак проблемы — горизонтальная прокрутка. Её быть не должно.

Частые ошибки

• Забыт тег viewport — медиазапросы на телефоне «не работают».
• Медиазапрос написан в начале CSS — обычные правила ниже его перебивают.
• Пропущена скобка: @media (max-width: 600px) { … без закрывающей } — ломается весь CSS ниже.
• Фиксированные ширины в px у блоков и картинок.

Проверь себя

1. Что будет на телефоне без тега viewport?
2. Как прочитать запись @media (max-width: 600px)?
3. Почему лучше max-width: 900px, чем width: 900px?