alt

Когда человеку тяжело,
это часто означает,
что он идёт к успеху.

alt


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

Категория: Адаптивная верстка Просмотров: 3741 Коментариев: 0 Дата: 2016-10-23 Добавил: admin

 Медиа-запросы

В прошлой статье рассказывалось как подключать медиа-запросы, а теперь настала очередь разъяснить как с ними работать. Для начала между тегами <head> и </head> подключаем метатег <META> viewport. После указания данного метатега и его значения мы можем спокойно использовать все медиа-запросы в CSS стилях и соответственно адаптировать наш сайт.

Что такое медиа-запрос? - Медиа-запросы – это инструмент для создания отзывчивых сайтов (адаптивных сайтов) с помощью CSS. Медиа-запрос позволяет изменять оформление страницы в зависимости от размера экрана пользователя. Рассмотрим медиа-запрос у которого screen (экран), шириной max-width:650px, при котором будут использоваться определённые стили, которые мы занесем в этот медиа запрос.

CSS
@media screen and (max-width:650px)
        {
                p{color: red; }
        }

Что выполняет данный медиа запрос? Если ширина экрана будет равна 650px или меньше, то текст закрасить в красный цвет. Для демонстрации Вы можете сузить окно браузера, сжимая его слева направо, когда размер ширины окна браузера дойдет до 650px то текст закрасится в красный цвет. Если вы пожелаете что бы текст становился красным не при 650px или меньшей ширине, а на оборот от ширины 650px и больше то вы уже должны использовать не max-width , а min-width.

И так проверяем что получилось:

CSS
@media screen and (min-width:650px)
        {
                p{color: red; }
        }

Теперь наш стиль будет применятся ширине экрана 650px и выше.

Можно также задавать два отдельных запроса, используя max-width и min-width. Для реализации мы используем следующий медиа-запрос:

CSS
@media screen and (max-width:750px) and (min-width:550px)
        {
                p{color: red; }
        }

Такой медиа запрос определит стили для ширины экрана находящейся в диапазоне между 550px и 750px (включительно) и текст будет окрашиваться в красный цвет только тогда, когда значение ширины экрана будет лежать в этом диапазоне.

Возможен также случай, когда Вы хотите задать какие-либо стили за пределами диапазона значений ширины экрана. Так если ширина экрана будет меньше 550px или больше 750px, то медиа-запрос будет иметь следующий вид.

CSS
@media screen and (max-width:550px), (min-width:750px)
        {
                p{color: red; }
        }


Проверяем на практике, как это все работает и видим, что у нас шрифт окрашивается в красный цвет когда ширина окна больше 750px и когда ширина окна меньше 550px, а в диапазоне этих значений, когда ширина окна браузера в пределах 550px - 750px текст у нас черный.

Все выше приведенные примеры работают только с шириной экрана, но можно задавать стили также и для высоты экрана. Для этого мы уже используем НЕ max-width, а max-height где мы уже берем высоту экрана нашего браузера.

Итак, попробуем изменять фон экрана. Условимся, что если высота нашего экрана будет меньше 750px или равна 750px то окрасим экран в синий цвет.

CSS
@media screen and (max-height:750px)
        {
                body{background: blue; }
        }

Также можно добавить к параметру max-height такой префикс, как device, необходимый для соответствующего реагирования на изменения высоты и ширины.

CSS
@media screen and (max-device-height:750px)
        {
                body{background: blue; }
        }

Если мы добавляем префикс, то в качестве значения будет учитывается вся ширина и вся высота экрана САМОГО устройства, а не высота и ширина окна браузера. Поэтому стили будут применяться в зависимости от высоты и ширины физического экрана самого устройства и не будут зависеть от размеров окна браузера. Существует также параметр ориентации, который применяется для особого расположения элемента, он может использоваться при размещении элементов меню или кнопок. Имеются два режима альбомный и портретный.

Для того что бы применить альбомный режим мы прописываем следующий параметр (orientation:landscape) . Значение landscape и указывает нам на то, что это альбомная ориентация.

CSS
@media screen and (orientation:landscape)
        {
                body{background: blue; }
        }

И, второй режим - портретный. Здесь в параметр orientation прописываем значение portair. В этом случае фон экрана будет окрашиваться синим при активном портретном режиме.

CSS
@media screen and (orientation:portair)
        {
                body{background: green; }
        }

На этом все, здесь были приведены примеры для наиболее распространённого типа screen всех устройств, имеющих экраны.




Добавить комментарий:


Ваше имя

Текст комментария


Введите буквы с учетом регистра:





Апдейты

Популярное Свежие записи

Облако тегов