Лабораторная работа №4 "Создание адаптивного макета с использованием CSS"
1. ЦЕЛЬ РАБОТЫ
Освоение современных технологий CSS для создания адаптивных и отзывчивых макетов веб-страниц. Формирование практических навыков работы с Flexbox, CSS Grid Layout, медиазапросами и методологией БЭМ для организации CSS-кода.
2. НЕОБХОДИМЫЕ ЗНАНИЯ
Для успешного выполнения работы студент должен знать:
-
Базовый синтаксис CSS (селекторы, свойства, каскадность, наследование).
-
Семантическую HTML-разметку, созданную в ЛР №3.
-
Понятие блочной модели (box model).
-
Основы работы с инструментами разработчика в браузере.
-
Структуру макета из Figma, предоставленного преподавателем.
3. ЗАДАЧИ РАБОТЫ
- Изучение Основ веб-дизайна, а также Инструментов для UI/UX-дизайна и адаптивной верстки.
- Реализовать визуальный макет, соответствующий предоставленному шаблону в Figma.
- Применить методологию БЭМ для организации CSS-кода.
- Реализовать макет страницы с использованием Flexbox и CSS Grid.
- Изучение видов CSS макетов.
- Обеспечить адаптивность интерфейса с помощью медиазапросов (mobile-first подход).
- Изучение Принципа Mobile First.
- Изучение основ медиазапросов — изучить основы использования медиазапросовв CSS для создания адаптивного дизайна веб-страниц, который корректно отображается на разных устройствах с различными размерами экранов.
- Применение медиазапросов — научиться применять медиазапросыдля изменения внешнего вида элементов в зависимости от ширины экрана, не используя сложных возможностей отзывчивого дизайна, таких как флексбоксы и сетки.
- Использование современных технологий CSS — освоить использование современных технологий CSS, таких как относительные единицы измерения (em, rem, %), CSS Grid и Flexbox, для создания отзывчивого дизайна веб-страниц.
- Использовать CSS-переменные для управления цветами, шрифтами и отступами.
- Протестировать отзывчивость макета на различных разрешениях экрана.
- Эксперименты с методами адаптивной верстки — провести эксперименты с медиазапросами, гибкой сеткой и flexbox для создания адаптивных макетов и анализа их кросс-браузерной совместимости.
- Сравнительный анализ — проанализировать результаты своих экспериментов и сравнить, как каждый метод адаптивной верстки влияет на кросс-браузерную совместимость.
Обзор различных методов адаптивной верстки:
-
- Медиазапросы (media queries): Основной инструмент для создания адаптивных дизайнов, с помощью которого можно изменять стили элементов в зависимости от характеристик устройства, таких как ширина экрана, разрешение и ориентация.
- Гибкая сетка (Flexible Grid Layouts): Использование процента и относительных единиц измерения для гибкой организации контента на странице.
- Flexbox: Современная технология для создания гибких и отзывчивых макетов, особенно полезна для выравнивания элементов по вертикали и горизонтали.
- CSS Grid: Сложная и мощная система для создания адаптивных макетов с сеткой.
4. ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ
Шаг 1: Введение в адаптивную верстку
- Ознакомиться с теоретической частью по отзывчивому дизайну и основным методам адаптивной верстки: медиазапросы, гибкие сетки, flexbox.
- Изучить теоретические материалы о кросс-браузерной совместимости и особенностях работы с различными браузерами.
Часть 1. Подготовка проекта и анализ макета
-
Перейдите в рабочую ветку:
git checkout main git pull origin main git checkout -b feature/responsive-layout
-
Анализ макета в Figma:
-
Откройте предоставленный преподавателем шаблон Figma для вашего проекта
-
Проанализируйте:
-
Общую структуру макета (header, main, footer, sidebar)
-
Цветовую палитру (основные цвета, акцентные)
-
Типографику (шрифты, размеры, межстрочные интервалы)
-
Отступы и выравнивание элементов
-
Адаптивные версии (мобильная, планшетная, десктопная)
-
-
-
Создайте и организуйте CSS-файлы по методологии БЭМ:
-
В папке
cssсоздайте файлы:-
styles.css- основной файл стилей -
variables.css- для CSS-переменных -
header.css- стили для шапки -
main.css- стили для основного контента -
footer.css- стили для подвала
-
-
Часть 2. Настройка CSS-переменных на основе макета Figma
-
В файле
variables.cssопределите переменные согласно макету:
Часть 3. Реализация адаптивного макета
Важно: В этой работе мы НЕ пересоздаем разметку, а добавляем стили к уже существующей семантической структуре из ЛР №3. Если в процессе стилизации потребуется добавить дополнительные HTML-обертки или классы - это нормальная практика рефакторинга.
Шаг 2: Создание базового HTML-макета - Лабораторная работа №3
- Написать базовую структуру HTML-страницы с использованием семантических тегов (
<header>,<footer>,<nav>,<section>,<article>). - Создать структуру сайта, которая будет использоваться для применения адаптивных стилей.
Применение медиазапросов
- Использовать медиазапросы для изменения внешнего вида элементов в зависимости от ширины экрана.
- Для мобильных устройств.
- Для планшетов.
- Для десктопных экранов.
- Проверить правильность отображения на различных устройствах с помощью инструментов разработчика браузера.
Шаг 4: Разработка адаптивного бургер-меню
- Создать адаптивное бургер-меню для мобильных устройств с использованием медиазапросов. На десктопах оно должно отображаться как горизонтальное меню, а на мобильных — как иконка с выпадающим списком.
Шаг 5: Применение Flexbox для адаптивных макетов
- Использовать Flexbox для создания гибких и адаптивных макетов на веб-странице.
- Создать адаптивные блоки с использованием флекс-элементов и выравнивания по вертикали и горизонтали.
-
Базовые стили (в
styles.css):
-
Шапка сайта (в
header.css):
-
Основной контент (в
main.css):
Часть 4. Стилизация компонентов по макету
Реализуйте стилизацию компонентов согласно вашему индивидуальному варианту и предоставленному макету Figma.
Часть 5. Тестирование соответствия макету
-
Сравните вашу реализацию с макетом в Figma
-
Проверьте соответствие:
-
Цветовой схемы
-
Типографики
-
Отступов и размеров
-
Адаптивного поведения
-
Шаг 6: Тестирование кросс-браузерной совместимости
- Проверить работу адаптивной верстки в различных браузерах: Google Chrome, Mozilla Firefox, Safari, Microsoft Edge, а также в старых версиях браузеров.
- Анализировать поведение сайта на разных устройствах и разрешениях экрана.
Шаг 7: Применение CSS Grid для сложных макетов
- Создать сложный макет с использованием CSS Grid.
- Изучить возможности CSS Grid в адаптивной верстке и проверить его совместимость с различными браузерами.
Шаг 8: Оценка и сравнительный анализ методов
- Оценить эффективность каждого метода: медиазапросов, Flexbox и Grid.
- Провести анализ кросс-браузерной совместимости для каждого метода, выявить сильные и слабые стороны.
Часть 6. Фиксация изменений
git add css/ git commit -m "feat: implement responsive layout according to Figma template" git push origin feature/responsive-layout
5. СОДЕРЖАНИЕ ОТЧЕТА
Отчёт о выполнении лабораторной работы должен содержать:
-
Титульный лист
-
Цель работы
-
Краткие теоретические сведения
-
Ход работы:
Описание проделанной работы:
- Скриншоты предоставленного макета Figma
- Скриншоты реализованной страницы на разных разрешениях
- Исходный код ключевых CSS-файлов
- Ссылка на коммит
- Использованные методы и их влияние на кросс-браузерную совместимость.
- Анализ результатов тестирования на разных устройствах и браузерах.
- Рекомендации по улучшению адаптивной верстки и кросс-браузерной совместимости.
-
Ответы на контрольные вопросы
-
Выводы
6. ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ И СДАЧЕ
Студенты работают с теми же вариантами, что и в ЛР №3 - Для выбора номера варианта для бригады используется Генератор вариантов.
-
1 подгруппа: варианты 1-8
-
2 подгруппа: варианты 9-16
ИНДИВИДУАЛЬНЫЕ ВАРИАНТЫ ЗАДАНИЙ
Задание для всех вариантов:
На основе семантической HTML-разметки из ЛР №3 и предоставленного макета Figma реализуйте адаптивную верстку главной страницы, точно соответствующую дизайну.
Акценты по вариантам соответствуют тематике проектов из ЛР №3.
КОНТРОЛЬНЫЕ ВОПРОСЫ
- Как вы обеспечили соответствие вашей верстки предоставленному макету Figma? Какие инструменты использовали для проверки соответствия?
- Какие технологии CSS (Flexbox/Grid) вы использовали для реализации различных частей макета и почему?
- Как методология БЭМ помогла вам в организации стилей для сложного макета?
- Какие особенности адаптивной верстки были в вашем макете и как вы их реализовали?
- С какими сложностями столкнулись при переносе дизайна из Figma в код и как их решили?
- Что такое медиазапросы и как они помогают создавать адаптивные страницы?
- Как работают гибкие сетки в адаптивной верстке?
- В чем заключается основное преимущество использования Flexbox для создания адаптивных макетов?
- Как CSS Grid помогает создать сложные адаптивные макеты?
- Какие проблемы могут возникать при тестировании адаптивной верстки в старых версиях браузеров?
- В чем заключается кросс-браузерная совместимость и почему она важна при разработке сайтов?
- Как определить, на каких устройствах лучше использовать медиазапросы?
- Какие есть способы улучшения кросс-браузерной совместимости с помощью автопрефиксов?
- Почему важно использовать относительные единицы измерения в адаптивной верстке?
- Как вы проверяете адаптивность сайта на различных устройствах?
- Какие фишки CSS Grid помогут вам создать адаптивную страницу?
- Что такое фоллбэки в CSS и как они могут помочь в кросс-браузерной совместимости?
- Как избежать проблем с отображением на экранах с высокой плотностью пикселей?
- Как можно реализовать адаптивные изображения с помощью CSS?
- Что такое mobile-first подход и как он влияет на создание адаптивных сайтов?
- Как использовать относительные и абсолютные единицы измерения (em, rem, %) в адаптивной верстке?
- Какие техники использования Flexbox наиболее эффективны для адаптивного дизайна?
- Как медиа-запросы взаимодействуют с сетками CSS Grid для создания адаптивных макетов?
- Как сделать адаптивную форму для ввода данных, чтобы она работала на разных устройствах?
- Как можно уменьшить размер CSS-кода для повышения производительности адаптивного сайта?
- Как использовать CSS для создания адаптивного меню с бургер-иконкой?
- Какие проблемы могут возникать при адаптации сайтов для разных типов экранов?
- Как можно обеспечить кросс-браузерную совместимость при использовании Flexbox?
- Почему важно тестировать адаптивную верстку на реальных устройствах, а не только в эмуляторах браузеров?
- Как решить проблемы с отображением текста на мобильных устройствах?
- Как использовать JavaScript для улучшения адаптивной верстки?
- Как можно применить методы CSS для оптимизации производительности адаптивного сайта?
- Какие инструменты помогают тестировать кросс-браузерную совместимость сайтов?
- В чем разница между адаптивной и отзывчивой версткой?
- Как сделать сайт адаптивным без использования сложных технологий, таких как Flexbox и Grid?
Примечание: Созданная стилизация будет использоваться в последующих работах для добавления интерактивности средствами JavaScript.
- 19 января 2026, 10:47
- 19 января 2026, 10:47
- 19 января 2026, 10:47
Состояние ответа
| Состояние ответа на задание | Отправлено для оценивания |
|---|---|
| Состояние оценивания | Оценено |
| Оставшееся время | Ответ на задание представлен с опозданием - 57 мин. 21 сек. |
| Последнее изменение | пятница, 20 марта 2026, 00:56 |
| Ответ в виде файла |
|
| Комментарии к ответу | Отобразить комментарии Сохранить комментарий | Отмена |
Отзыв
| Оценка | 9,00 / 10,00 |
|---|---|
| Оценено в | понедельник, 23 марта 2026, 02:30 |
| Оценено |