В этом уроке завершим работу над адаптивным сайтом, настроив его отображение на всех типах экранов — от мобильных до больших компьютерных мониторов.
Анализ текущего состояния
Проанализируем текущее состояние сайта, используя консоль разработчика (доступна через контекстное меню правой кнопкой мыши на сайте — «Просмотреть код» или через меню «Дополнительные инструменты» -> «Инструменты разработчика»). Эмуляция различных устройств, например, Apple iPad, поможет выявить недостатки. На iPad, например, шапка выглядит неплохо, но навигационное меню требует корректировки отступов для выстраивания элементов в одну строку. Правый блок следует увеличить, а левый — слегка сдвинуть влево. Футер пока оставим без изменений.
Media Queries
Для применения стилей к экранам с различным разрешением используются медиа-запросы (Media Queries) в CSS3. Предпочтительнее встраивать Media Queries непосредственно в основной CSS-файл, избегая дублирования кода, вместо подключения отдельных CSS-файлов через @import.
Точки перехода и адаптация под разные экраны
Определим точки перехода для изменения расположения элементов. При ширине экрана 899 пикселей всё отображается корректно, поэтому возьмем 900 пикселей как первую границу. Для экранов с шириной менее 900 пикселей уменьшим отступы в меню: первый элемент — с 12% до 4%, отступы между остальными элементами — до 2%. Ширину основного блока изменим до 99% (0.5% отступа слева и справа).
Код для экранов шириной менее 900 пикселей:
@media (max-width: 899px) {
/* Изменения отступов для элементов меню. Ширина основного блока: 99% */
}Для экранов с шириной менее 370 пикселей выстроим элементы меню в одну строку:
@media (max-width: 369px) {
/* Элементы меню выстраиваются в одну строку */
}При ширине около 415 пикселей изменим расположение элементов шапки, выстроив их в два ряда:
@media (max-width: 415px) {
/* Изменения в расположении элементов шапки */
}Для экранов с шириной менее 690 пикселей изменим ширину правой колонки, чтобы все блоки выстроились в одну строку:
@media (max-width: 690px) {
/* Изменения ширины и отступов правой колонки */
}Для создания адаптивного сайта используйте относительные единицы измерения (проценты) и медиа-запросы. Мы рассмотрели основные приёмы адаптивной верстки. Процесс адаптации может быть сложнее, но основные принципы были показаны.