Предыдущий ролик Следующий ролик  

Видео урок: Загрузка альтернативного контента на основании размера экрана

Создание отзывчивого веб-дизайна

На данный момент в нашем проекте загружается только HTML файл для большого экрана. Поэтому если мы сузим браузер до экрана среднего размера, мы все равно будем видеть контент большого экрана. А если мы свернем браузер до экрана для мобильного устройства, то все равно будем видеть большое изображение. Мы отключили заголовок при помощи CSS, но у нас все равно остался большой график. А сейчас мы поменяем вот здесь контент. Мы будем загружать контент для большого экрана, если экран находится в таком состоянии, контент для среднего экрана, основываясь на абсолютно другом HTML файле, или же мы будем убирать этот контент для маленьких экранов.

Чтобы сделать это, давайте вернемся к файлу design.js. Заходим в функцию loadHero. Добавим сюда несколько Return, чтобы дать себе немного места. Внутри loadHero мы будем определять размер окна. Нажимаем несколько Return внутри loadHero. Добавляем другой оператор условия. Итак, пишем if, круглые скобки, фигурные скобки. Открываем их. Внутри круглых скобок вставляем оператор условия. Пишем if, windowSize, два знака равно, строковый литерал, large.

Итак, "if windowSize == large". Давайте зайдем сюда и обрежем оператор load, который мы вставили ранее. Сейчас если windowSize равна large, мы нацелимся на область hero и загрузим контент для большого экрана. Давайте добавим еще один оператор условия. Вставляем if, круглые скобки, фигурные скобки. Давайте зайдем сюда и просто скопируем то, что находится внутри круглых скобок. Вставляем это внутрь второго оператора условия. Если windowSize равна medium, тогда мы копируем выражение load внутрь условия для medium вставляем content_large. А теперь меняем имя файла на hero_content_medium.

Далее мы копируем весь оператор условия для medium. Теперь меняем размер окна на маленький. А здесь вместо того чтобы загружать какой-то контент, мы идем сюда. Меняем .load на .html. Внутри круглых скобок мы вставляем две одинарные кавычки для строкового литерала. В этом случае будет взят любой HTML контент, который был загружен с большого или среднего экранов, и просто удален. Теперь, когда все на месте, нажимаем save. Давайте вернемся и протестируем все это в нашем браузере. Нажимаем Reload. Сейчас мы смотрим на окно в 853 пикселя, а это наш большой экран, поэтому мы видим и соответствующий контент.

Давайте свернем браузер до среднего экрана. Мы видим, что изменился не только CSS для среднего экрана, мы также видим и соответствующий контент, который приходит от нужного HTML файла. А на маленьком экране мы видим только график для заднего фона, который мы дали нашему CSS. Мы не видим никакого HTML, который был загружен из большого и среднего экранов, потому что мы все очистили, установив HTML для области hero на null. Теперь в дополнение к тому, что при смене размера экрана были изменены верстка и дизайн, мы также видим альтернативный контекст, основываясь на размере экрана. В этих HTML файлах у вас может быть любой контент, вы можете загружать дополнительные графики, дополнительную копию, а также менять этот контент, основываясь на размере экрана пользователя.

А теперь, когда все на месте, мы сфокусируемся на изменении навигации для маленьких экранов.