Медиа-запросы в CSS: основы и примеры

Введение в медиа-запросы

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

Адаптивный дизайн не только улучшает пользовательский опыт, но и помогает повысить рейтинг сайта в поисковых системах. Google, например, учитывает удобство использования сайта на мобильных устройствах при ранжировании результатов поиска. Поэтому использование медиа-запросов становится неотъемлемой частью современного веб-дизайна.

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

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

Медиа-запросы в CSS имеют простой и понятный синтаксис. Они начинаются с ключевого слова @media, за которым следует условие и блок стилей, которые применяются, если это условие выполняется.

@media (условие) {
  /* CSS стили */
}

Примеры условий

1. Минимальная ширина экрана: применяет стили, если ширина экрана больше или равна указанному значению.

   CSS

   Скопировать код

    @media (min-width: 600px) {
      body {
        background-color: lightblue;
      }
    }

   Запустить код

2. Максимальная ширина экрана: применяет стили, если ширина экрана меньше или равна указанному значению.

   CSS

   Скопировать код

    @media (max-width: 600px) {
      body {
        background-color: lightgreen;
      }
    }

   Запустить код

3. Ориентация экрана: применяет стили в зависимости от ориентации экрана (портретная или ландшафтная).

   CSS

   Скопировать код

    @media (orientation: landscape) {
      body {
        background-color: lightcoral;
      }
    }

   Запустить код

4. Плотность пикселей: позволяет изменять стили в зависимости от плотности пикселей на устройстве.

   CSS

   Скопировать код

    @media (min-resolution: 2dppx) {
      body {
        font-size: 18px;
      }
    }

   Запустить код

Подробнее об этом расскажет наш спикер на видео

Комбинирование условий

Медиа-запросы также позволяют комбинировать несколько условий с помощью логических операторов and, or, not.

@media (min-width: 600px) and (orientation: landscape) {
  body {
    background-color: lightcoral;
  }
}

Примеры использования медиа-запросов

Рассмотрим несколько примеров, которые помогут вам лучше понять, как использовать медиа-запросы на практике.

Пример 1: Изменение фона страницы

Изменим цвет фона страницы в зависимости от ширины экрана.

body {
  background-color: white;
}

@media (min-width: 600px) {
  body {
    background-color: lightblue;
  }
}

@media (max-width: 599px) {
  body {
    background-color: lightgreen;
  }
}

Этот пример показывает, как можно использовать медиа-запросы для изменения стилей в зависимости от ширины экрана. Когда ширина экрана больше или равна 600px, цвет фона будет светло-голубым. Если ширина экрана меньше 600px, цвет фона изменится на светло-зеленый.

Пример 2: Адаптация шрифта

Изменим размер шрифта заголовка в зависимости от ширины экрана.

h1 {
  font-size: 24px;
}

@media (min-width: 600px) {
  h1 {
    font-size: 36px;
  }
}

@media (max-width: 599px) {
  h1 {
    font-size: 18px;
  }
}

В этом примере размер шрифта заголовка h1 изменяется в зависимости от ширины экрана. При ширине экрана больше или равной 600px размер шрифта увеличивается до 36px, а при ширине экрана меньше 600px уменьшается до 18px.

Пример 3: Скрытие элементов

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

.menu {
  display: block;
}

@media (max-width: 600px) {
  .menu {
    display: none;
  }
}

В этом примере меню будет отображаться на экранах шириной более 600px и скрываться на экранах шириной менее 600px. Это полезно для упрощения интерфейса на мобильных устройствах.

Адаптивная верстка с медиа-запросами

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

Пример адаптивной верстки

Рассмотрим пример адаптивной верстки для простого макета с двумя колонками.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
    }

    .column {
      flex: 1;
      padding: 10px;
    }

    @media (max-width: 600px) {
      .column {
        flex: 100%;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="column" style="background-color: lightblue;">Колонка 1</div>
    <div class="column" style="background-color: lightgreen;">Колонка 2</div>
  </div>
</body>
</html>

В этом примере, когда ширина экрана меньше 600px, колонки будут располагаться одна под другой, занимая всю ширину экрана. При ширине экрана больше 600px, колонки будут располагаться рядом друг с другом.

Пример адаптивной верстки с изображениями

Изображения также могут адаптироваться к размерам экрана с помощью медиа-запросов.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .responsive-img {
      width: 100%;
      height: auto;
    }

    @media (min-width: 600px) {
      .responsive-img {
        width: 50%;
      }
    }
  </style>
</head>
<body>
  <img src="example.jpg" alt="Example Image" class="responsive-img">
</body>
</html>

В этом примере изображение будет занимать всю ширину экрана на устройствах с шириной экрана менее 600px и только половину ширины экрана на устройствах с шириной экрана более 600px.

Советы и лучшие практики

1. Используйте относительные единицы измерения: такие как проценты и em, чтобы сделать ваш дизайн более гибким.
2. Тестируйте на реальных устройствах: эмуляторы полезны, но всегда проверяйте, как ваш сайт выглядит на реальных устройствах.
3. Минимизируйте количество медиа-запросов: используйте их только там, где это действительно необходимо.
4. Начинайте с мобильной версии: это поможет вам создать более оптимизированный и легкий дизайн.
5. Используйте современные инструменты: такие как CSS Grid и Flexbox, которые облегчают создание адаптивных макетов.
6. Следите за производительностью: слишком большое количество медиа-запросов может замедлить загрузку страницы.
7. Используйте препроцессоры: такие как Sass или Less, чтобы упростить работу с медиа-запросами и сделать код более организованным.
8. Документируйте свои медиа-запросы: это поможет вам и вашим коллегам лучше понимать, какие стили применяются в различных условиях.

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

Читайте также

• Решение проблем совместимости в верстке
• Сравнение Flexbox и Grid Layout
• Основы кроссбраузерной верстки
• Разработка верстки email рассылки
• Инструменты для тестирования и отладки верстки
• Работа с SVG в верстке
• Полезные ресурсы и документация для верстальщиков
• Основы Flexbox: гибкая верстка
• Основы CSS: стилизация веб-страниц
• Что такое верстка сайта?