Media запросы

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

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

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

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

Основные характеристики

Media запросы могут проверять различные характеристики устройства, включая:

• Ширина и высота окна просмотра: Позволяет адаптировать дизайн в зависимости от размеров экрана.
• Ориентация: Определяет, находится ли устройство в портретной или ландшафтной ориентации.
• Разрешение: Учитывает плотность пикселей на устройстве, что важно для дисплеев с высоким разрешением.
• Тип устройства: Например, screen для экранов, print для печати.

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

Рассмотрим простой пример использования media запросов для изменения стилей в зависимости от ширины экрана:

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

Объяснение кода:

• body { background-color: white; font-size: 16px; }: Устанавливает базовые стили для страницы, задавая белый фон и размер шрифта 16px.

• @media (max-width: 600px) { ... }: Начинает media запрос, который применяется только если ширина экрана 600 пикселей или меньше.

• body { background-color: lightgray; font-size: 14px; }: Внутри media запроса изменяются стили для body, устанавливая светло-серый фон и уменьшая размер шрифта до 14px. Это делает текст более читаемым на маленьких экранах.

Зачем это нужно

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