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

Введение

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

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

🎯 Задачи

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

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

🏆 Достижения

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/ResponsiveandAdaptiveDesignGroup(["Responsive and Adaptive Design"]) css/CoreLayoutGroup -.-> css/display_property("Display Property") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/ResponsiveandAdaptiveDesignGroup -.-> css/media_queries("Media Queries") css/ResponsiveandAdaptiveDesignGroup -.-> css/mobile_first_design("Mobile First Design") subgraph Lab Skills css/display_property -.-> lab-300102{{"Реактивный дизайн веб-страниц с использованием Gulp"}} css/positioning -.-> lab-300102{{"Реактивный дизайн веб-страниц с использованием Gulp"}} css/media_queries -.-> lab-300102{{"Реактивный дизайн веб-страниц с использованием Gulp"}} css/mobile_first_design -.-> lab-300102{{"Реактивный дизайн веб-страниц с использованием Gulp"}} end

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

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

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

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

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

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

Теперь вы можете увидеть статическую страницу веб-сайта 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.

✨ Проверить решение и практиковаться

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.