CSS: Адаптивность сайта
2026-02-26 20:32 Diff
https://ru.hexlet.io/courses/css-adaptive/lessons/intro/theory_unit

Адаптивная вёрстка — неотъемлемая часть современной разработки. При создании адаптивной вёрстки мы меняем дизайн страницы в зависимости от поведения пользователя, размеров экрана, ориентации устройства.

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

В этом курсе будут рассмотрены стандартные практики по созданию адаптивных сайтов:

  • гибкие элементы;
  • использование возможностей Flex;
  • использование media-запросов CSS;
  • создание контрольных точек (breakpoint).

Адаптивная вёрстка

В этом введении сразу хочется расставить некие акценты, с которыми нам будет проще в изучении темы. Разделение понятий адаптивной и резиновой вёрстки остались в прошлом, когда в моде были разделения по конкретным разрешениям экрана и полное изменение CSS в зависимости от этого. Многообразие различных устройств в современном мире слишком большое, чтобы можно было выбрать 3-5 конкретных разрешений и верстать под них. Необходимо брать максимально много из всех подходов, чтобы, в конечном итоге, получить макет, который будет отображаться хорошо на любых устройствах при любых разрешениях.

В рамках курса все подходы будут сложены в одно понятие — адаптивная вёрстка.

Практика

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

Практики в этом курсе построены по системе тестирования скриншотов. В отличие от других курсов, здесь идёт проверка не по значениям, которые вы указываете, а делается скриншот страницы с вашими стилями и сравнивается со скриншотами решения учителя. Вы можете легко увидеть, как должна выглядеть страница при разных разрешениях viewport.

Посмотреть скриншоты со стилями из решения учителя вы можете в директории __tests__/__image_snapshots__.

Инструменты разработчика

Каждый современный браузер имеет специальный инструментарий разработчика. В браузере Google Chrome его можно вызвать, используя контекстное меню, в котором есть пункт Inspect, либо воспользоваться комбинацией Ctrl+ Shift+I (Command+Option+I на Маке). В этой панели нас интересует кнопка Toggle Device Toolbar. Это вызовет специальный вид браузера, внутри которого можно указывать разрешение экрана и проверять вёрстку сайта.