Что такое MediaQuery

1️⃣ Как кратко ответить

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

2️⃣ Подробное объяснение темы

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

Зачем нужны MediaQuery

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

Как работает MediaQuery

MediaQuery использует правила, которые проверяют характеристики устройства. Если условия выполняются, применяются определенные стили. Это позволяет изменять, например, размер шрифта, ширину колонок или скрывать элементы в зависимости от размера экрана.

Пример использования MediaQuery

Рассмотрим простой пример, где мы изменяем цвет фона и размер шрифта в зависимости от ширины экрана.

body {
  background-color: white; /* Базовый цвет фона */
  font-size: 16px; /* Базовый размер шрифта */
}
​
/* MediaQuery для экранов шириной 600px и меньше */
@media (max-width: 600px) {
  body {
    background-color: lightblue; /* Изменение цвета фона для маленьких экранов */
    font-size: 14px; /* Уменьшение размера шрифта для маленьких экранов */
  }
}

• body { background-color: white; font-size: 16px; }: Устанавливает базовые стили для фона и размера шрифта.
• @media (max-width: 600px): Начало MediaQuery, которое проверяет, если ширина экрана 600 пикселей или меньше.
• body { background-color: lightblue; font-size: 14px; }: Если условие выполняется, изменяет цвет фона на светло-голубой и уменьшает размер шрифта.

Применение MediaQuery

MediaQuery может использоваться для различных целей, таких как:

• Изменение макета страницы (например, переход от много-колоночного к одно-колоночному макету).
• Адаптация изображений и видео для разных размеров экранов.
• Скрытие или отображение элементов интерфейса в зависимости от устройства.
• Оптимизация производительности, загружая только необходимые ресурсы для конкретного устройства.

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