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
.