CSS: Медиа запросы

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

Один из способов решения этой проблемы — использование CSS правил только для определённых разрешений экрана, например, для всех, у которых оно меньше 1000 пикселей.

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

@media (условия) {
  правила
}

Используем условие max-width, чтобы определить, до какого значения ширины использовать правила:

@media (max-width: 1000px) {

  body {
    background-color: blue;
  }

}

// На устройствах, с шириной экрана до 1000 пикселей цвет фона у тега body будет голубым.

Полезным условием является также orientation. Оно помогает указать для какой ориентации экрана использовать правила. Например, для портретной (portrait) ориентации (когда просто держим телефон в руках) у нас блоки должны занимать всю ширину экрана. В альбомной (landscape) (когда переворачиваем телефон) по 2 блока в одной строке:

@media (orientation: landscape) {
  .blocks {
    // Правила для блоков
  }
}

@media (orientation: portrait) {
  .blocks {
    // Правила для блоков
  }
}

Теперь мы имеем различные правила для разных ориентаций устройств.

Всю информацию по доступным условиям можно найти в официальном стандарте W3C

Задание

Добавьте белый цвет текста у параграфов с классом white-text-mobile для устройств с шириной экрана не больше 750 пикселей. Стили запишите в теге style.