Лабораторная работа №13: Адаптивная верстка: от мобильного до десктопа

Цель работы

Научиться создавать адаптивный интерфейс, который корректно отображается на устройствах с разными размерами экрана.

Теоретическая часть

Адаптивная верстка — это подход к веб-дизайну, при котором веб-страница автоматически подстраивается под размер экрана устройства. Основные понятия:

Медиа-запросы (Media Queries) — CSS-правила, которые применяются только при определенных условиях (ширина экрана, ориентация и т.д.)
Мобильный-first подход — сначала верстается мобильная версия, затем добавляются стили для планшетов и десктопов
Резиновая верстка — использование относительных единиц измерения (проценты, em, rem, vw, vh)
Viewport метатег — тег, который управляет масштабированием и размерами области просмотра на мобильных устройствах

Пример медиа-запроса:

@media (max-width: 768px) {
  /* Стили для планшетов */
}

@media (max-width: 576px) {
  /* Стили для мобильных устройств */
}

Bootstrap 5 использует 6 точек останова (breakpoints) для адаптивности:

xs — до 576px (по умолчанию, без префикса)
sm — от 576px
md — от 768px
lg — от 992px
xl — от 1200px
xxl — от 1400px

В этой лабораторной работе мы сделаем сайт "Языковой портал" полностью адаптивным для всех типов устройств.

Задание

Настроить отображение сайта на разных устройствах с использованием медиа-запросов и сетки Bootstrap 5.

Пошаговая инструкция

Добавьте viewport метатег

Убедитесь, что в файле public/index.html есть следующий метатег:

Этот тег сообщает браузеру, что ширина области просмотра равна ширине устройства и отключает автоматическое масштабирование.

Используйте адаптивные классы Bootstrap

Измените сетку на главной странице, используя адаптивные классы:

✅ Квалифицированные преподаватели

Многие из них имеют опыт работы за рубежом или являются носителями языка.

✅ Удобный график

Занятия в группах с комфортной наполняемостью (6-8 человек) или индивидуально.

✅ Гибкие скидки

Отсутствие скрытых платежей, гибкая система скидок.

Класс col-md-4 означает, что на средних и больших экранах (ширина ≥768px) элементы будут занимать 4 колонки из 12, а на мобильных устройствах — всю ширину.

Создайте кастомные медиа-запросы

Создайте файл src/index.css и добавьте адаптивные стили:

/* Стили для мобильных устройств */
@media (max-width: 576px) {
  .hero-section {
    padding: 2rem 1rem;
  }
  
  .hero-section h1 {
    font-size: 1.8rem;
  }
  
  .testimonial-slider .blockquote {
    font-size: 0.9rem;
  }
  
  .course-card .card-img-top {
    height: 150px;
    object-fit: cover;
  }
}

/* Стили для планшетов */
@media (min-width: 576px) and (max-width: 992px) {
  .hero-section {
    padding: 3rem 2rem;
  }
  
  .hero-section h1 {
    font-size: 2.2rem;
  }
}

/* Стили для больших экранов */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

Импортируйте кастомные стили

Добавьте импорт в файл src/index.js:

// Добавьте после импортов Bootstrap
import './index.css';

Настройте адаптивный навбар

Убедитесь, что навбар правильно сворачивается на мобильных устройствах:

Сделайте слайдер отзывов адаптивным

Обновите компонент TestimonialSlider для адаптивности:

{testimonials[currentIndex].text}

{testimonials[currentIndex].author}

Проверьте адаптивность

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

Нажмите F12 или Ctrl+Shift+I для открытия инструментов разработчика
Нажмите на иконку "Toggle device toolbar" (или Ctrl+Shift+M)
Протестируйте сайт на разных размерах экрана (мобильный, планшет, десктоп)
Проверьте, как изменяется расположение элементов
Убедитесь, что текст читаем, кнопки нажимаемы, изображения не обрезаны

Если сайт корректно отображается на всех размерах экрана, значит, адаптивная верстка реализована верно.

Критерий	Баллы
Использованы медиа-запросы	3
Корректная адаптация для мобильных	3
Корректная адаптация для планшетов	2
Корректная адаптация для десктопов	2
Итого	10

Связь с демонстрационным экзаменом

Эта лабораторная работа связана с профессиональной компетенцией:

ПК: Создавать структуру кода веб-страницы информационных ресурсов в соответствии с дизайн-макетом

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

Согласно документу КОД 09.02.09-1-2025, на экзамене оценивается:

Умение создавать адаптивный интерфейс веб-ресурса
Навык разработки программного кода веб-страниц информационного ресурса, в том числе с использованием готовых технических решений

Также в задании ДЭ ПУ указано требование: "Заказчик хочет, чтобы сайт был современный и энергичный, а также удобный, простой и не менял свои качества при различных разрешениях экрана."

Цель работы

Теоретическая часть

Задание

Пошаговая инструкция

✅ Квалифицированные преподаватели

✅ Удобный график

✅ Гибкие скидки

Критерии оценки

Связь с демонстрационным экзаменом