Респонсивный веб-дизайн для всех экранов

Введение

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

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

🎯 Задачи

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

• настраивать начальный макет для меню и разделов контента;
• реализовывать адаптивный дизайн с использованием медиа-запросов;
• тестировать и усовершенствовать адаптивный дизайн, чтобы обеспечить бесперебойный опыт.

🏆 Достижения

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

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

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

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

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

├── css
│   └── style.css
├── images
│   ├── 1.png
│   └── 2.png
├─── js
│    └── jQuery.min.js
└─── index.html

В них:

• index.html — главная страница.
• css/style.css — файл, в котором нужно дополнить стили.
• js/jQuery.min.js — файл библиотеки jQuery.
• images — папка с изображениями.

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

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

Реализация адаптивного дизайна

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

1. Добавьте следующее правило CSS в конец файла css/style.css:

@media (max-width: 800px) {
  .menu {
    height: 54px;
    line-height: 54px;
    margin-bottom: 25px;
  }

  .icon-menu {
    color: #a0a0a0;
    margin-left: 20px;
    display: inline-block !important;
  }

  .icon-menu:hover {
    color: white;
    cursor: pointer;
  }

  .collapse {
    display: none;
  }

  input[type="checkbox"]:checked ~ .collapse {
    display: flex;
    flex-direction: column;
    background-color: #252525;
  }

  .dropdown:hover ul {
    display: flex;
    flex-direction: column;
  }

  .row {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
  }

  .box {
    margin-bottom: 15px;
  }

  #tutorials img {
    margin: 0;
  }
}

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

Основные изменения:

• Высота и межстрочный интервал меню установлены в 54px, чтобы соответствовать мобильному дизайну.
• Кнопка меню (.icon-menu) отображается и стилизуется.
• Класс .collapse используется для скрытия пунктов меню по умолчанию и отображается при нажатии на кнопку меню.
• Стили .row и .box обновлены, чтобы отображать контент в单列очном макете на мобильном устройстве.
• Отступ #tutorials img удален, чтобы соответствовать мобильному макету.

2. Сохраните файл css/style.css и обновите веб-страницу. Теперь вы должны увидеть работу адаптивного дизайна, при этом мобильный макет отображается при ширине экрана менее 800px.

Тестирование и усовершенствование адаптивного дизайна

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

1. Откройте веб-страницу в своем браузере и изменяйте размер окна до различных ширины, чтобы убедиться, что макет корректно адаптируется.
2. Протестируйте функциональность кнопки меню в мобильном макете, убедитесь, что пункты меню отображаются при нажатии на кнопку.
3. Проверьте макет контента как в десктопном, так и в мобильном представлении, убедитесь, что изображения, текст и интервал между элементами выглядят хорошо.
4. Если вы обнаружите какие-либо проблемы или области для улучшения, обновите CSS в файле css/style.css и обновите страницу, чтобы увидеть изменения.

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

Готовый мобильный результат показан ниже:

Резюме

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