Как использовать медиа-запросы CSS для создания адаптивного дизайна на Getcourse?

Привет! Мы сегодня поговорим о том, как сделать ваш курс на Getcourse удобным для просмотра на любом устройстве с помощью адаптивного дизайна и CSS медиа-запросов.

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

Как мы можем сделать это на Getcourse? С помощью CSS медиа-запросов. Это технология CSS, которая позволяет настроить стили на основе характеристик устройства, на котором отображается веб-сайт.

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

Чтобы добавить класс элементу на странице, необходимо перейти на вкладку "Настроить вид". Затем выбрать нужный элемент добавить ему класс, после чего сохранить настройки. Дальше следует перейти на вкладку "Стили" и ввести соответствующий код для скрытия элемента с классом "my-block" на мобильных устройствах.

Ниже пример CSS кода, который скроет кнопку с классом "my-block" на мобильных устройствах:

Этот код говорит браузеру скрыть блок с классом "my-block" на всех устройствах, ширина экрана которых меньше или равна 600 пикселей. Таким образом, на маленьких экранах пользователи будут видеть только необходимый контент.

Другой пример, который мы можем использовать, это изменение размера текста в зависимости от размера экрана. Например, мы можем использовать следующий медиа-запрос для уменьшения размера текста на маленьких экранах:

@media only screen and (max-width: 600px) { .my-text { font-size: 14px; } }

В этом примере мы используем медиа-запрос, который уменьшает размер текста с классом ".my-text" на экранах, ширина которых меньше или равна 600 пикселей. Таким образом, текст будет лучше читаем на маленьких экранах и не будет выходить за пределы экрана.

Медиа-запросы могут быть применены не только к размеру экрана, но и к другим характеристикам устройства, таким как ориентация экрана (портретная или альбомная), плотность пикселей, цветность экрана и другим.

Допустим нужно адаптировать ваш сайт для устройств с небольшими и средними экранами в портретной ориентации.

/* Медиа-запрос для устройств */
@media screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) {
  body {
    font-size: 14px;
    background-color: lightyellow;
  }

  .my_navigation {
    display: flex;
    flex-direction: column;
  }

  .my_menu-item {
    margin-bottom: 5px;
  }
}

Этот медиа-запрос проверяет, является ли устройство экраном (например, смартфон, планшет, компьютер), имеет ли ширину экрана от 320 до 768 пикселей и вертикальную ориентацию. Если всё это соблюдается, то применяются стили: размер шрифта становится 14 пикселей, фон меняется на светло-желтый, а навигация располагается вертикально с отступами между пунктами меню.

Используя адаптивный дизайн и медиа-запросы на Getcourse, вы сможете создать более удобный и доступный курс для пользователей на всех устройствах.

✨Зарегистрируйтесь на GetCourse по этой ссылке и получите бесплатный доступ на 14 дней!

⭐️Хотите, чтобы ваш проект на GetCourse выглядел профессионально и привлекал клиентов? Я помогу вам с дизайном и версткой. Свяжитесь со мной в Telegram