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

CSSCSSBeginner
Практиковаться сейчас

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

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

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

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

🎯 Задачи

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

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

🏆 Достижения

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/ResponsiveandAdaptiveDesignGroup(["Responsive and Adaptive Design"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/AdvancedLayoutGroup(["Advanced Layout"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicConceptsGroup -.-> css/properties("Properties") css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/AdvancedLayoutGroup -.-> css/flexbox("Flexbox") css/ResponsiveandAdaptiveDesignGroup -.-> css/media_queries("Media Queries") css/ResponsiveandAdaptiveDesignGroup -.-> css/mobile_first_design("Mobile First Design") subgraph Lab Skills css/selectors -.-> lab-300113{{"Респонсивный веб-дизайн для всех экранов"}} css/properties -.-> lab-300113{{"Респонсивный веб-дизайн для всех экранов"}} css/box_model -.-> lab-300113{{"Респонсивный веб-дизайн для всех экранов"}} css/display_property -.-> lab-300113{{"Респонсивный веб-дизайн для всех экранов"}} css/flexbox -.-> lab-300113{{"Респонсивный веб-дизайн для всех экранов"}} css/media_queries -.-> lab-300113{{"Респонсивный веб-дизайн для всех экранов"}} css/mobile_first_design -.-> lab-300113{{"Респонсивный веб-дизайн для всех экранов"}} end

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

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

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

├── 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 удален, чтобы соответствовать мобильному макету.
  1. Сохраните файл css/style.css и обновите веб-страницу. Теперь вы должны увидеть работу адаптивного дизайна, при этом мобильный макет отображается при ширине экрана менее 800px.

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

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

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

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

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

Завершенный эффект
✨ Проверить решение и практиковаться

Резюме

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