Адаптивный дизайн

Эта практическая работа является частью учебного курса «Разработка прогрессивных веб-приложений», разработанного командой Google Developers Training. Вы получите максимальную пользу от этого курса, если будете выполнять практические работы последовательно.

Полную информацию о курсе смотрите в обзоре «Разработка прогрессивных веб-приложений» .

Введение

В этой лабораторной работе вы узнаете, как оформить содержимое вашего веб-сайта, чтобы сделать его адаптивным.

Чему вы научитесь

  • Как оформить приложение так, чтобы оно хорошо работало в различных форм-факторах
  • Как использовать Flexbox для простой организации контента в столбцы
  • Как использовать медиазапросы для реорганизации контента в зависимости от размера экрана

Что вам следует знать

  • Базовый HTML и CSS

Что вам понадобится

  • Компьютер с доступом к терминалу/оболочке
  • Подключение к Интернету
  • Текстовый редактор

Загрузите или клонируйте репозиторий pwa-training-labs с github и установите LTS-версию Node.js , если необходимо.

Если у вас нет предпочитаемого локального сервера разработки, установите пакет http-server Node.js:

npm install http-server -g

Перейдите в каталог responsive-design-lab/app/ и запустите сервер:

cd responsive-design-lab/app
http-server -p 8080 -a localhost -c 0

Вы можете завершить работу сервера в любое время с помощью сочетания Ctrl-c .

Откройте браузер и перейдите по адресу localhost:8080/ .

Примечание: Отмените регистрацию всех сервис-воркеров и очистите все кэши сервис-воркеров для локального хоста, чтобы они не мешали работе лаборатории. В Chrome DevTools это можно сделать, нажав «Очистить данные сайта» в разделе «Очистить хранилище» на вкладке «Приложение» .

Если у вас есть текстовый редактор, позволяющий открыть проект, откройте папку responsive-design-lab/app/ . Это упростит организацию. В противном случае откройте папку в файловой системе вашего компьютера. В папке app/ вы будете создавать лабораторную работу.

Эта папка содержит:

  • index.html — это главная HTML-страница для нашего образца сайта/приложения.
  • modernizr-custom.js — это инструмент обнаружения функций, который упрощает тестирование поддержки Flexbox.
  • styles/main.css — каскадная таблица стилей для сайта-примера

Вернитесь в приложение в браузере. Попробуйте уменьшить ширину окна до 500 пикселей и обратите внимание, что контент отображается некорректно.

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

Замените TODO 3 в index.html следующим тегом:

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

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

Примечание: Эмуляция устройства позволяет приблизительно представить, как ваш сайт будет выглядеть на мобильном устройстве, но для получения полной картины всегда рекомендуется тестировать сайт на реальных устройствах. Подробнее об отладке устройств Android в Chrome и Firefox можно узнать здесь.

Объяснение

Метатег viewport даёт браузеру инструкции по управлению размерами и масштабированием страницы. Свойство width управляет размером области просмотра. Оно может быть задано определённым числом пикселей (например, width=500 ) или специальным значением device-width, которое представляет собой ширину экрана в пикселях CSS при масштабе 100%. (Существуют соответствующие значения height и device-height , которые могут быть полезны для страниц с элементами, размер или положение которых зависят от высоты области просмотра.)

Свойство initial-scale управляет уровнем масштабирования при первой загрузке страницы. Установка начального масштаба улучшает восприятие, но контент всё равно выходит за края экрана. Мы исправим это на следующем шаге.

Для получения дополнительной информации

Замените TODO 4 в styles/main.css следующим кодом:

@media screen and (max-width: 48rem) {
  .container .col {
    width: 95%;
  }
}

Сохраните файл. Отключите режим устройства в браузере и обновите страницу. Попробуйте уменьшить ширину окна. Обратите внимание, что при указанной ширине содержимое переключается в одноколоночный формат. Снова включите режим устройства и убедитесь, что содержимое подстраивается под ширину устройства.

Объяснение

Чтобы текст был читабельным, мы используем медиазапрос, когда ширина окна браузера достигает 48rem (768 пикселей при размере шрифта браузера по умолчанию или в 48 раз больше размера шрифта по умолчанию в браузере пользователя). Подробнее о том, почему rem — хороший выбор для относительных единиц измерения, читайте в статье «Когда использовать Em или Rem». При запуске медиазапроса мы меняем макет с трёх колонок на одну, изменяя width каждого из трёх элементов div для заполнения страницы.

Модуль Flexbox Layout Module (Flexbox) — полезный и простой в использовании инструмент для создания адаптивного контента. Flexbox позволяет добиться того же результата, что и в предыдущих шагах, но при этом он берёт на себя расчёт отступов и предоставляет набор готовых CSS-свойств для структурирования контента.

Закомментируйте существующие правила в CSS

Закомментируйте все правила в styles/main.css , заключив их в теги /* и */ . Мы сделаем их резервными правилами на случай, если Flexbox не будет поддерживаться в разделе Flexbox as progressive enhancement.

Добавить макет Flexbox

Замените TODO 5.2 в styles/main.css следующим кодом:

.container {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  background: #eee;  
  overflow: auto;
}

.container .col {
  flex: 1;
  padding: 1rem;
}

Сохраните код и обновите index.html в браузере. Отключите режим устройства в браузере и обновите страницу. Если сузить окно браузера, столбцы станут тоньше, пока видимым не останется только один из них. Мы исправим это с помощью медиазапросов в следующем упражнении.

Объяснение

Первое правило определяет container div как flex-контейнер. Это обеспечивает flex-контекст для всех его прямых дочерних элементов. Мы совмещаем старый и новый синтаксис для включения Flexbox, чтобы обеспечить более широкую поддержку (см . подробнее ).

Второе правило использует класс .col для создания дочерних элементов Flex одинаковой ширины. Установка первого аргумента свойства flex в 1 для всех элементов div с классом col равномерно распределяет оставшееся пространство между ними. Это удобнее, чем самостоятельно рассчитывать и задавать относительную ширину.

Для получения дополнительной информации

Необязательно: задайте различные значения относительной ширины.

Используйте псевдокласс nth-child , чтобы задать относительную ширину первых двух столбцов равной 1, а третьего — 1,5. Для установки относительной ширины каждого столбца необходимо использовать свойство flex . Например, селектор для первого столбца будет выглядеть так:

.container .col:nth-child(1)

Используйте медиа-запросы с Flexbox

Замените TODO 5.4 в styles/main.css на код ниже:

@media screen and (max-width: 48rem) {
  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: column;
  }
}

Сохраните код и обновите index.html в браузере. Теперь при уменьшении ширины окна браузера содержимое будет перегруппировано в один столбец.

Объяснение

При запуске медиазапроса мы меняем макет с трёхколоночного на одноколоночный, устанавливая свойство flex-flow в column . Это даёт тот же результат, что и медиазапрос, добавленный на шаге 5. Flexbox предоставляет множество других свойств, таких как flex-flow , которые позволяют легко структурировать, переупорядочивать и выравнивать контент, чтобы он хорошо вписывался в любой контекст.

Поскольку Flexbox — относительно новая технология, нам следует включить резервные варианты в наш CSS.

Добавить Modernizr

Modernizr — это инструмент обнаружения функций, который упрощает тестирование поддержки Flexbox.

Замените TODO 6.1 в index.html на код для включения пользовательской сборки Modernizr:

<script src="modernizr-custom.js"></script>

Объяснение

Мы включаем сборку Modernizr в начало файла index.html , которая проверяет поддержку Flexbox. Это запускает тест при загрузке страницы и добавляет класс flexbox к элементу <html> , если браузер поддерживает Flexbox. В противном случае к элементу <html> добавляется класс no-flexbox . В следующем разделе мы добавим эти классы в CSS.

Примечание: Если бы мы использовали свойство Flexbox flex-wrap , нам пришлось бы добавить отдельный детектор Modernizr только для этой функции. Старые версии некоторых браузеров частично поддерживают Flexbox и не включают эту функцию.

Используйте Flexbox постепенно

Давайте используем классы flexbox и no-flexbox в CSS, чтобы предоставить запасные правила, когда Flexbox не поддерживается.

Теперь в styles/main.css добавьте .no-flexbox перед каждым правилом, которое мы закомментировали:

.no-flexbox .container {
  background: #eee;
  overflow: auto;
}

.no-flexbox .container .col {
    width: 27%;
    padding: 30px 3.15% 0;
    float: left;
}

@media screen and (max-width: 48rem) {
  .no-flexbox .container .col {
    width: 95%;
  }
}

В том же файле добавьте .flexbox перед остальными правилами: 

.flexbox .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #eee;
  overflow: auto;
}

.flexbox .container .col {
  flex: 1;
  padding: 1rem;
}

@media screen and (max-width: 48rem) {
    .flexbox .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-flow: column;
    }
}

Не забудьте добавить .flexbox к правилам для отдельных столбцов, если вы выполнили необязательный шаг 5.3.

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

Для получения дополнительной информации

Вы научились оформлять контент, чтобы сделать его адаптивным. Используя медиазапросы, вы можете изменять макет контента в зависимости от размера окна или экрана устройства пользователя.

Что мы рассмотрели

  • Настройка визуального окна просмотра
  • Flexbox
  • Медиа-запросы

Ресурсы

Узнайте больше об основах адаптивного дизайна

Узнайте больше о Flexbox как о прогрессивном улучшении

Узнайте о библиотеках для адаптивного CSS

Узнайте больше об использовании медиазапросов

Чтобы увидеть все практические работы в учебном курсе PWA, ознакомьтесь с приветственными практическими работами для курса.