Урок 4. Создание адаптивного дизайна для портфолио

В этом уроке мы займёмся созданием адаптивного дизайна для нашего портфолио. Это важный шаг, так как современный сайт должен хорошо выглядеть на любом устройстве, будь то смартфон, планшет или компьютер с большим экраном. Мы будем использовать CSS-медиа-запросы, чтобы адаптировать нашу страницу для разных разрешений экрана.

Что такое адаптивный дизайн?

Адаптивный дизайн позволяет вашему сайту автоматически подстраиваться под размер экрана устройства пользователя. Это значит, что ваше портфолио будет отлично выглядеть как на большом мониторе, так и на мобильном телефоне. Мы будем использовать медиа-запросы (@media), чтобы изменять стили в зависимости от ширины экрана.

Добавляем адаптивные стили

Давайте начнём с того, что добавим стили для экранов меньшего размера. Например, когда ширина экрана меньше 768 пикселей (это стандартное разрешение для планшетов), мы хотим, чтобы некоторые элементы были выровнены по-другому, а текст уменьшился.

Откройте файл styles.css и добавьте следующие медиа-запросы:

@media (max-width: 768px) {
    /* Контейнер на планшетах и мобильных */
    .container {
        padding: 15px;
    }

    /* Заголовок уменьшается для мобильных устройств */
    .header h1 {
        font-size: 20px;
    }

    /* Описание также уменьшается */
    .description {
        font-size: 14px;
    }

    /* Карточки проектов становятся вертикальными */
    .project-link {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Стрелка перемещается вниз */
    .arrow {
        margin-top: 10px;
        font-size: 18px;
    }
}

Что здесь происходит:

• @media (max-width: 768px) — это медиа-запрос. Он означает, что стили внутри этого блока будут применяться только тогда, когда ширина экрана меньше 768 пикселей (типичный размер для планшетов и телефонов).

• .container — мы уменьшили внутренние отступы (padding), чтобы контейнер выглядел аккуратнее на маленьких экранах.

• .header h1 — заголовок уменьшен до 20 пикселей, чтобы он не выглядел слишком большим на маленьких устройствах.

• .description — текст описания также уменьшен, чтобы соответствовать размеру экрана.

• .project-link — карточки проектов теперь располагаются вертикально (мы изменили flex-direction), чтобы они лучше подходили под мобильные устройства. Также выровняли элементы по началу строки (align-items: flex-start).

• .arrow — стрелка, которая указывает на ссылку, перемещается под контент, и мы уменьшаем её размер, чтобы она не занимала много места.

Добавляем стили для ещё меньших экранов

Теперь давайте добавим стили для очень маленьких экранов (например, смартфонов с шириной экрана менее 480 пикселей). Мы ещё больше уменьшим текст и сделаем другие элементы более компактными.

@media (max-width: 480px) {
    /* Заголовок на очень маленьких экранах */
    .header h1 {
        font-size: 18px;
    }

    /* Описание на маленьких экранах */
    .description {
        font-size: 12px;
    }

    /* Контент проектов на мобильных */
    .project-title {
        font-size: 16px;
    }

    .project-description {
        font-size: 12px;
    }

    /* Уменьшаем размер стрелки */
    .arrow {
        font-size: 16px;
    }
}

Что здесь происходит:

• @media (max-width: 480px) — этот медиа-запрос применяется, когда ширина экрана меньше 480 пикселей (типичный размер для смартфонов).

• .header h1 — заголовок уменьшен до 18 пикселей, чтобы не занимать слишком много места на экране телефона.

• .description — описание также уменьшено до 12 пикселей.

• .project-title и .project-description — мы уменьшили текст внутри карточек проектов, чтобы сделать их более компактными на телефонах.

• .arrow — стрелка снова уменьшена, чтобы она оставалась пропорциональной размеру карточек.

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

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

Что дальше?

Поздравляю! Теперь ваше портфолио адаптивное, и оно будет отлично выглядеть на любом устройстве. В следующем уроке мы займёмся улучшением визуальной части: добавим анимации и интерактивные эффекты.