Реактивный дизайн веб-страниц | Руководство по веб-сайту Gulp.js

Введение

В этом проекте вы научитесь реализовывать адаптивный макет для веб-сайта, подобный официальному веб-сайту Gulp.js. Вы будете использовать медиа-запросы для настройки макета и стилей веб-страницы в зависимости от размера экрана.

👀 Предпросмотр

предпросмотр адаптивного макета

🎯 Задачи

В этом проекте вы научитесь:

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

🏆 Достижения

После завершения этого проекта вы сможете:

Реализовать адаптивный дизайн веб-страницы с использованием медиа-запросов
Настраивать макет и стили в зависимости от размера экрана
Эффективно тестировать и оптимизировать веб-страницы для различных устройств и разрешений экранов

Настройка проекта

В этом шаге вы настроите проект и откроете файлы в редакторе.

Откройте папку проекта, которая содержит следующие файлы и директории:

├── css
├── imgs
├── js
└── index.html

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и вручную обновите ее, чтобы увидеть страницу.

Кнопка Go Live в WebIDE

Теперь вы можете увидеть статическую страницу веб-сайта Gulp, которая еще не адаптивна. Вручную измените размер окна, и вы увидите следующее действие.

Макет неадаптивной веб-страницы

Добавить медиа-запросы

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

Откройте файл index.html в редакторе кода.
Найдите первую секцию <style> в <head> документа.
Добавьте следующее правило медиа-запроса под /* TODO */ в <style>:

/* TODO */
@media screen and (max-width: 1400px) {
  nav.content,
  main section {
    width: 900px !important;
  }
}

@media screen and (max-width: 900px) {
  nav.content,
  main section {
    width: 700px !important;
  }
}

@media screen and (max-width: 650px) {
  main section,
  main ul li {
    width: 100% !important;
  }

  nav.content.list {
    display: none;
  }

  nav.content.menu {
    display: block;
    position: absolute;
    right: 10px;
  }

  main ul li:nth-child(even) {
    margin-left: 0 !important;
  }
}

Эти медиа-запросы будут применять специфические стили к странице в зависимости от ширины экрана. Первый медиа-запрос устанавливает ширину контента и главной секции в 900px, когда ширина экрана меньше или равна 1400px. Второй медиа-запрос устанавливает ширину в 700px, когда ширина экрана меньше или равна 900px. Третий медиа-запрос скрывает навигационный список, отображает значок меню и устанавливает ширину главной секции и элементов списка в 100%, когда ширина экрана меньше или равна 650px.

Протестировать адаптивный макет

В этом шаге вы будете тестировать адаптивный дизайн и вносить необходимые доработки.

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

На этом этапе вы завершили реализацию адаптивного макета для веб-сайта Gulp.js. Теперь страница должна адаптироваться к разным размерам экранов в соответствии с требованиями.

Завершенный результат для мобильных устройств показан ниже:

Завершенный эффект

Поздравляем! Вы успешно реализовали адаптивный макет для веб-сайта Gulp.js.