В прошлой статье рассказывалось как подключать медиа-запросы, а теперь настала очередь разъяснить как с ними работать. Для начала между тегами <head> и </head> подключаем метатег <META> viewport. После указания данного метатега и его значения мы можем спокойно использовать все медиа-запросы в CSS стилях и соответственно адаптировать наш сайт.
Что такое медиа-запрос? - Медиа-запросы – это инструмент для создания отзывчивых сайтов (адаптивных сайтов) с помощью CSS. Медиа-запрос позволяет изменять оформление страницы в зависимости от размера экрана пользователя. Рассмотрим медиа-запрос у которого screen (экран), шириной max-width:650px, при котором будут использоваться определённые стили, которые мы занесем в этот медиа запрос.
@media screen and (max-width:650px)
{
p{color: red; }
}
Что выполняет данный медиа запрос? Если ширина экрана будет равна 650px или меньше, то текст закрасить в красный цвет. Для демонстрации Вы можете сузить окно браузера, сжимая его слева направо, когда размер ширины окна браузера дойдет до 650px то текст закрасится в красный цвет. Если вы пожелаете что бы текст становился красным не при 650px или меньшей ширине, а на оборот от ширины 650px и больше то вы уже должны использовать не max-width , а min-width.
И так проверяем что получилось:
@media screen and (min-width:650px)
{
p{color: red; }
}
Теперь наш стиль будет применятся ширине экрана 650px и выше.
Можно также задавать два отдельных запроса, используя max-width и min-width. Для реализации мы используем следующий медиа-запрос:
@media screen and (max-width:750px) and (min-width:550px)
{
p{color: red; }
}
Такой медиа запрос определит стили для ширины экрана находящейся в диапазоне между 550px и 750px (включительно) и текст будет окрашиваться в красный цвет только тогда, когда значение ширины экрана будет лежать в этом диапазоне.
Возможен также случай, когда Вы хотите задать какие-либо стили за пределами диапазона значений ширины экрана. Так если ширина экрана будет меньше 550px или больше 750px, то медиа-запрос будет иметь следующий вид.
@media screen and (max-width:550px), (min-width:750px)
{
p{color: red; }
}
Проверяем на практике, как это все работает и видим, что у нас шрифт окрашивается в красный цвет когда ширина окна больше 750px и когда ширина окна меньше 550px, а в диапазоне этих значений, когда ширина окна браузера в пределах 550px - 750px текст у нас черный.
Все выше приведенные примеры работают только с шириной экрана, но можно задавать стили также и для высоты экрана. Для этого мы уже используем НЕ max-width, а max-height где мы уже берем высоту экрана нашего браузера.
Итак, попробуем изменять фон экрана. Условимся, что если высота нашего экрана будет меньше 750px или равна 750px то окрасим экран в синий цвет.
@media screen and (max-height:750px)
{
body{background: blue; }
}
Также можно добавить к параметру max-height такой префикс, как device, необходимый для соответствующего реагирования на изменения высоты и ширины.
@media screen and (max-device-height:750px)
{
body{background: blue; }
}
Если мы добавляем префикс, то в качестве значения будет учитывается вся ширина и вся высота экрана САМОГО устройства, а не высота и ширина окна браузера. Поэтому стили будут применяться в зависимости от высоты и ширины физического экрана самого устройства и не будут зависеть от размеров окна браузера. Существует также параметр ориентации, который применяется для особого расположения элемента, он может использоваться при размещении элементов меню или кнопок. Имеются два режима альбомный и портретный.
Для того что бы применить альбомный режим мы прописываем следующий параметр (orientation:landscape) . Значение landscape и указывает нам на то, что это альбомная ориентация.
@media screen and (orientation:landscape)
{
body{background: blue; }
}
И, второй режим - портретный. Здесь в параметр orientation прописываем значение portair. В этом случае фон экрана будет окрашиваться синим при активном портретном режиме.
@media screen and (orientation:portair)
{
body{background: green; }
}
На этом все, здесь были приведены примеры для наиболее распространённого типа screen всех устройств, имеющих экраны.
CSS