Больше половины пользователей заходят на сайты с телефонов. Если страница свёрстана только под десктоп, на мобильном она выглядит крошечной или разъезжается. Адаптивная вёрстка решает эту задачу — делает сайт удобным на любом экране. Начинается всё с двух вещей: специального мета-тега, без которого телефон вообще не покажет страницу правильно, и подхода mobile-first — привычки проектировать сначала под маленький экран, а потом расширять. Это фундамент, без которого остальные приёмы адаптивности не заработают.

После этого урока вы будете знать, как заставить браузер телефона корректно отображать страницу, и освоите mobile-first — образ мышления, с которого начинается любая современная адаптивная вёрстка.

Что уже умеем / что добавим

Вы владеете раскладкой на Grid и Flexbox и позиционированием. Теперь научимся делать эту раскладку адаптивной. В сквозном проекте мы подготовим страницу сайта к адаптивности: добавим мета-тег viewport и заложим базовые мобильные стили, от которых будем расширяться.

Что вы узнаете в рамках статьи

• Почему без мета-тега viewport сайт на телефоне выглядит неправильно.
• Как записывается мета-тег viewport и что означают его параметры.
• В чём суть подхода mobile-first.
• Почему проектировать от мобильного к десктопу удобнее, чем наоборот.

Ключевые термины

• Viewport — видимая область страницы в окне устройства.
• Мета-тег viewport — тег, задающий браузеру, как масштабировать страницу.
• device-width — ширина экрана устройства в CSS-пикселях.
• Mobile-first — подход: сначала стили для мобильных, затем расширение под крупные экраны.

Почему телефон показывает сайт неправильно

Мобильные браузеры по умолчанию притворяются широкими: они делают вид, что экран имеет ширину около 980 пикселей, и вписывают в неё всю страницу, а затем уменьшают целиком. Так старые сайты, свёрстанные под десктоп, хотя бы помещаются на экран — но ценой того, что текст становится нечитаемо мелким, и приходится всё время увеличивать масштаб пальцами.

Для современного адаптивного сайта такое поведение вредно: мы хотим, чтобы телефон использовал свою настоящую ширину и показывал мобильную версию макета, а не уменьшенную десктопную. Чтобы это включить, странице нужен специальный мета-тег.

Мета-тег viewport

Мета-тег viewport ставится в <head> документа и говорит браузеру использовать реальную ширину устройства и не масштабировать страницу:

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

Разберём параметры. width=device-width велит взять за ширину страницы настоящую ширину экрана устройства, а не выдуманные 980 пикселей. initial-scale=1.0 задаёт начальный масштаб один к одному — без исходного приближения или отдаления. С этим тегом телефон покажет вашу мобильную вёрстку в натуральную величину, и медиазапросы (их изучим дальше) начнут срабатывать по реальной ширине экрана.

Это одна строка, но без неё вся адаптивность не имеет смысла: медиазапросы будут ориентироваться на ложную ширину. Поэтому мета-тег viewport — обязательный первый шаг любого адаптивного сайта.

Что такое mobile-first

Mobile-first — это подход, при котором вы сначала пишете стили для маленького экрана, а затем, по мере роста ширины, добавляете и усложняете макет для планшетов и десктопов. Базовые стили — мобильные; всё «настольное» подключается сверху.

Противоположный путь (desktop-first) — начать с широкого макета и потом ужимать его под телефон. На практике mobile-first оказывается удобнее: на маленьком экране вы вынуждены оставить только главное, а затем расширять — это дисциплинирует и даёт более чистую структуру. Ужимать же готовый сложный десктопный макет обычно тяжелее, чем наращивать простой мобильный.

/* Базовые (мобильные) стили — одна колонка */
.services {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

Это базовый мобильный вид: карточки в одну колонку, потому что на узком экране больше и не поместится. От него мы и будем расширяться.

Мыслим от малого к большому

Суть mobile-first не только в порядке кода, но и в образе мышления. Начиная с телефона, вы задаёте себе правильные вопросы: что здесь главное, без чего можно обойтись, как уместить контент в узкую колонку. Ответив на них, вы получаете крепкую основу.

Дальше макет только обогащается: на планшете колонок становится две, на десктопе — три, появляется боковая панель, увеличиваются отступы. Каждый следующий «размерный уровень» добавляет возможности, ничего не ломая. В следующих уроках мы научимся описывать эти уровни медиазапросами — но сама привычка «сначала мобильный, потом расширяем» закладывается уже сейчас.

Применяем в проекте

Подготовим страницу сайта к адаптивности. Добавим мета-тег viewport в head и зададим базовые мобильные стили: карточки услуг в одну колонку. Это станет отправной точкой mobile-first.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Сайт компании</title>
</head>

/* Базовые мобильные стили */
.services {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

Откройте страницу и сузьте окно до размеров телефона: карточки услуг идут в одну аккуратную колонку, текст читается в натуральную величину без необходимости увеличивать масштаб. Мета-тег заставил браузер использовать реальную ширину экрана, а базовые стили дали чистый мобильный вид. Это прочный фундамент — на следующих уроках мы будем расширять его под крупные экраны.

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

• Забытый мета-тег viewport.
  Без него телефон масштабирует десктопную версию, и медиазапросы работают по ложной ширине.
• Фиксированные ширины в пикселях.
  Жёсткие width: 1000px ломают мобильный вид; на узком экране контент должен подстраиваться.
• Desktop-first по привычке.
  Начинать со сложного десктопного макета и ужимать его тяжелее, чем расширять простой мобильный.
• Проверка только на десктопе.
  Обязательно смотрите страницу в узком окне или в режиме устройства браузера — иначе мобильные проблемы останутся незамеченными.

Итоги

Отличный старт заключительного раздела! Вы поняли, почему без мета-тега viewport телефон показывает сайт неправильно, научились его прописывать и разобрались в подходе mobile-first — привычке проектировать от маленького экрана к большому. Ваша страница уже корректно отображается на мобильном и готова к расширению. Это тот фундамент, на котором держится вся адаптивность.

Так держать! В следующем уроке мы научимся описывать разные размеры экрана с помощью медиазапросов @media и контрольных точек — и заставим макет по-настоящему меняться от телефона к десктопу.