Адаптивная вёрстка — неотъемлемая часть современной разработки. При создании адаптивной вёрстки мы меняем дизайн страницы в зависимости от поведения пользователя, размеров экрана, ориентации устройства.
Ранее для создания мобильной версии сайта использовали отдельный шаблон, который зачастую подгружался с поддомена. Данное решение было сложным с точки зрения поддержки сайта, ведь для создания/удаления новых блоков приходилось выполнять двойную работу: для основного сайта и для его мобильной версии. В настоящее время мы можем существенно экономить время и не отдавать пользователю новый макет, а изменять текущий.
В этом курсе будут рассмотрены стандартные практики по созданию адаптивных сайтов:
- гибкие элементы;
- использование возможностей Flex;
- использование media-запросов CSS;
- создание контрольных точек (breakpoint).
Адаптивная вёрстка
В этом введении сразу хочется расставить некие акценты, с которыми нам будет проще в изучении темы. Разделение понятий адаптивной и резиновой вёрстки остались в прошлом, когда в моде были разделения по конкретным разрешениям экрана и полное изменение CSS в зависимости от этого. Многообразие различных устройств в современном мире слишком большое, чтобы можно было выбрать 3-5 конкретных разрешений и верстать под них. Необходимо брать максимально много из всех подходов, чтобы, в конечном итоге, получить макет, который будет отображаться хорошо на любых устройствах при любых разрешениях.
В рамках курса все подходы будут сложены в одно понятие — адаптивная вёрстка.
Практика
Многие из уроков в данном курсе будут иметь практики с возможностью перехода в веб-доступ. Старайтесь не просто выполнять задание, а после успешного прохождения также экспериментируйте с кодом и возможностями, которые вы узнали.
Практики в этом курсе построены по системе тестирования скриншотов. В отличие от других курсов, здесь идёт проверка не по значениям, которые вы указываете, а делается скриншот страницы с вашими стилями и сравнивается со скриншотами решения учителя. Вы можете легко увидеть, как должна выглядеть страница при разных разрешениях viewport.
Посмотреть скриншоты со стилями из решения учителя вы можете в директории __tests_/_image_snapshots__.
Инструменты разработчика
Каждый современный браузер имеет специальный инструментарий разработчика. В браузере Google Chrome его можно вызвать, используя контекстное меню, в котором есть пункт Inspect, либо воспользоваться комбинацией Ctrl+ Shift+I (Command+Option+I на Маке). В этой панели нас интересует кнопка Toggle Device Toolbar. Это вызовет специальный вид браузера, внутри которого можно указывать разрешение экрана и проверять вёрстку сайта.
- Описание режима эмуляции мобильных устройств в Google Chrome
- Описание режима эмуляции мобильных устройств в Firefox
- Описание режима эмуляции мобильных устройств в Safari
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
