Практика: создание одностраничного сайта с адаптивным дизайном

Подготовка: что нам понадобится? ️

Для создания адаптивного одностраничника подготовьте:

Текстовый редактор (VS Code, Sublime Text)
Браузер с DevTools (Chrome, Firefox)
Иконки из Font Awesome (CDN)
Google Fonts для шрифтов

💡 Совет: Используйте Live Server в VS Code для мгновенного обновления превью при изменениях!

Структура HTML: каркас сайта ️

Создадим базовую разметку с семантическими тегами:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Адаптивный лендинг</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="header">
        <nav>...</nav>
    </header>
    <main>
        <section class="hero">...</section>
        <section class="features">...</section>
    </main>
    <footer>...</footer>
</body>
</html>

Ключевые моменты:

viewport — обязателен для адаптивности
Семантические теги (header, section) улучшают SEO

CSS: Mobile First подход 📱➡️🖥️

Начнём стилизацию с мобильных устройств:

/* Базовые стили */
:root {
    --primary-color: #4e6bff;
    --text-color: #333;
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    margin: 0;
    color: var(--text-color);
}

.header {
    padding: 1rem;
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

🔥 Важно: Используйте CSS-переменные для цветов и отступов — это упростит адаптацию!

Медиазапросы: адаптируем под планшеты и ПК 📐

Добавим breakpoints для разных экранов:

/* Планшеты (768px и выше) */
@media (min-width: 768px) {
    .header {
        padding: 1.5rem 2rem;
    }

    .hero {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}

/* Десктопы (1024px и выше) */
@media (min-width: 1024px) {
    .features {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

Типичные breakpoints:

768px — планшеты
1024px — ноутбуки
1200px — большие экраны

Гибкие изображения и типографика 🖼️

Сделаем контент по-настоящему адаптивным:

img {
    max-width: 100%;
    height: auto;
}

.hero__title {
    font-size: 2rem;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .hero__title {
        font-size: 2.5rem;
    }
}

Техники для текста:

rem вместо px для масштабирования
Относительные единицы (vw, %) для гибкости

Навигация: гамбургер-меню ↔️

Реализуем адаптивное меню без JavaScript:

<nav class="navbar">
    <input type="checkbox" id="menu-toggle" class="menu-toggle">
    <label for="menu-toggle" class="hamburger">☰</label>
    <ul class="menu">
        <li><a href="#features">Возможности</a></li>
        <li><a href="#pricing">Цены</a></li>
    </ul>
</nav>

.menu-toggle {
    display: none;
}

.hamburger {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
}

@media (max-width: 767px) {
    .hamburger {
        display: block;
    }

    .menu {
        display: none;
    }

    .menu-toggle:checked ~ .menu {
        display: block;
    }
}

Тестирование: DevTools и реальные устройства 📱💻

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

В Chrome: Ctrl+Shift+M — режим эмуляции
Используйте Device Toolbar для разных разрешений
Проверяйте на реальных смартфонах!

🚨 Ошибка новичков: забывают тестировать промежуточные разрешения между breakpoints.

Финал: что мы узнали?

Сегодня вы:

✅ Создали семантическую HTML-структуру
✅ Применили Mobile First подход
✅ Настроили плавную адаптацию через медиазапросы
✅ Реализовали гамбургер-меню на чистом CSS