Как сделать медиа запросы css

Медиазапросы — CSS: Адаптивность сайта

Одним из самых важных инструментов при создании адаптивной вёрстки является использование медиазапросов. Медиазапросы — специальные условные конструкции, которые позволяют применять стили только для определённых устройств.

Медиазапросы записываются следующим образом:

В качестве условия могут выступать различные значения и константы. Зачастую используются следующие конструкции:

Ориентация экрана

Для определения ориентации экрана используется ключ orientation , значением которого может выступать одно из двух значений:

landscape . Условие выполнится для устройств с горизонтальной ориентацией экрана. Горизонтальная — ориентация, при которой ширина viewport больше его высоты.
portrait . Условие выполнится для устройств с вертикальной ориентацией экрана. Вертикальная — ориентация, при которой высота viewport больше его ширины.

 @media (orientation: landscape)  /* При горизонтальной ориентации фоновым цветом сайта будет белый */ body  background: #FFF; > > @media (orientation: portrait)  /* При вертикальной ориентации фоновым цветом сайта будет чёрный */ body  background: #000; > >

Разрешение экрана

При использовании медиазапросов мы также можем исходить из ширины или высоты viewport. Для этого используются знакомые нам по обычным CSS-правилам условия width, min-width, max-width для ширины и height, min-height, max-height для высоты.

С помощью таких условий создаются breakpoint — контрольные точки. Это границы значений, по которым видоизменяется наш макет. Такие точки остановки позволяют иметь правила для мониторов, планшетов, телефонов, кофеварок.

 /* Здесь будут все стили для устройств с viewport больше 1400 пикселей. */ @media (max-width: 1400px)  /* Стили для устройств, у которых ширина viewport меньше или равно 1400 пикселей, но больше 990 пикселей. Эти стили будут использованы для планшетов и ноутбуков с низким разрешением */ > @media (max-width: 990px)  /* Стили для устройств, у которых ширина viewport меньше или равно 990 пикселей, но больше 770 пикселей. Эти стили подойдут для некоторых мобильных устройств и планшетов */ > @media (max-width: 770px)  /* Стили для устройств, у которых ширина viewport меньше или равно 770 пикселей. Это множество мобильных устройств */ >

Обратите внимание на порядок написания свойств. Помните, что CSS является каскадной таблицей, поэтому порядок стилей необходимо контролировать. В данном случае к элементу вначале будет применён стиль по умолчанию, который не находится в медиазапросе, затем поочерёдно будут применяться стили в зависимости от значений в условии медиазапроса.

Например, при ширине viewport 770 пикселей для элемента стили применятся в следующем порядке:

Стили по умолчанию.
Стили для условия медиазапроса max-width: 1400px .
Стили для условия медиазапроса max-width: 990px .
Стили для условия медиазапроса max-width: 770px .

Подход, описанный выше называется Desktop First. Мы вначале пишем стили для больших мониторов, а в последствии, используя медиазапросы, дописываем стили для всё более маленьких значений viewport. Его характерная черта в медиазапросах — использование конструкции max-width в качестве условия.

В противовес Desktop First существует подход Mobile First. Его особенностью является то, что вначале пишутся стили под мобильные устройства, а затем, используя медиазапросы, пишутся стили для больших размеров viewport. Если в Desktop First основной конструкцией являлось использование max-width, то в Mobile First используется min-width.

Стили, написанные с использованием подхода Mobile First выглядят следующим образом:

 /* Здесь будут все стили для мобильных устройств с viewport меньше 770 пикселей. */ @media (min-width: 770px)  /* Стили для устройств, у которых ширина viewport больше или равно 770 пикселей */ > @media (min-width: 990px)  /* Стили для устройств, у которых ширина viewport больше или равно 990 пикселей, но меньше 1400 пикселей. */ > @media (min-width: 1400px)  /* Стили для устройств, у которых ширина viewport больше или равно 1400 пикселей */ >

Логические операторы

Условия внутри медиазапросов можно комбинировать. Для этого существует три логических оператора:

Логическое «И». Означает, что несколько условий должны быть выполнены для того, чтобы CSS-стили применились к элементу. Для использования логического «И» используется ключевое слово and . Сделаем условие, которое проверяет, что экран устройства находится в портретной (вертикальной) ориентации и имеет ширину viewport не меньше 600 пикселей:

 @media (orientation: portrait) and (min-width: 600px)  .container  /* Для устройств с портретной ориентацией и шириной viewport не менее 600 пикселей сделать элементы с классом container шириной в 100 процентов */ width: 100%; > >

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

 @media (orientation: portrait), (min-width: 600px)  .container  /* Для устройств с портретной ориентацией ИЛИ шириной viewport не менее 600 пикселей сделать элементы с классом container шириной в 100 процентов */ width: 100%; > >

Логическое «НЕ». Свойства применятся в том случае, если условие не выполняется. Используется ключевое слово not . Реальное использование этого оператора не велико, в виду сложности и не интуитивности происходящего. В связи с этим советую воздержаться в первое время от использования ключевого слова not .

 @media not all and (orientation: landscape)  .container  /* Для устройств с портретной ориентацией (условие выглядит как «НЕ горизонтальная») сделать элементы с классом container шириной в 100 процентов */ width: 100%; > >

Использование медиазапросов при подключении CSS

Медиазапросы возможно писать не только внутри CSS-файла, но и использовать их в HTML при подключении файла стилей. В этом случае медиазапрос указывается в атрибуте media .

lang=«ru»> charset=«UTF-8»> name=«viewport» content=«width=device-width, initial-scale=1.0»> Подключение CSS файлов rel=«stylesheet» href=«style.css»> rel=«stylesheet» media=«screen and (min-width: 750px)» href=«style750px.css»>

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

130 курсов, 2000+ часов теории
1000 практических заданий в браузере
360 000 студентов

Наши выпускники работают в компаниях:

Медиа-запросы вместе с Less

До использования CSS-препроцессоров все мы писали одинаково:

// Area site .area < margin-left: auto; margin-right: auto; >@media (min-width: 768px) < .area < width: 750px; >> @media (min-width: 1024px) < .area < width: 970px; >>

Согласитесь, это выглядит ужасно. Мало того, что нужно писать полный запрос, класс .area , так и нужно помнить точки перелома 768px и 1024px . Не комильфо. Будем думать над решением.

Как это можно делать сейчас

CSS-препроцессор, на самом деле, может реально упростить вам работу с выражениями вида @media . Вне зависимости от предложенных способов ниже, профит в скорости разработки будет в любом случае.

Случай первый — Переменные точек

Достаточно просто объявить переменные, которые будут содержать значения точек перелома нашего сайта:

// Mode: Tablet @tablet: 768px; @tablet-area: 750px; // Mode: Desktop @desktop: 1024px; @desktop-area: 970px; // Area site .area < margin-left: auto; margin-right: auto; >@media (min-width: @tablet) < .area < width: @tablet-area; >> @media (min-width: @desktop) < .area < width: @desktop-area; >>

Отлично, теперь наш код стал слегка универсальнее. Но это ещё не все — идём дальше.

Случай второй — Переменные выражения

Препроцессор Less позволяет прописывать в переменные не только значения, но и строки. Используем эту возможность:

// Mode: Tablet @tablet: ~"(min-width: 768px)"; @tablet-area: 750px; // Mode: Desktop @desktop: ~"(min-width: 1024px)"; @desktop-area: 970px; // Area site .area < margin-left: auto; margin-right: auto; >@media @tablet < .area < width: @tablet-area; >> @media @desktop < .area < width: @desktop-area; >>

Теперь наш код выглядит ещё лучше, но до совершенства ещё далеко.

Случай третий — Вложенность

Не стоит забывать, что в Less, да и во всех препроцессорах, реализована вложенность классов — это так же работает и с медиа-запросами.

// Mode: Tablet @tablet: ~"(min-width: 768px)"; @tablet-area: 750px; // Mode: Desktop @desktop: ~"(min-width: 1024px)"; @desktop-area: 970px; // Area site .area < margin-left: auto; margin-right: auto; @media @tablet < width: @tablet-area; >@media @desktop < width: @desktop-area; >>

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

Случай четвертый — Примесь

Если вы хотите написать свою примесь для медиа-запросов, то сделать это можно с помощью блока отдельных правил:

// Mode: Tablet @tablet-area: 750px; .tablet(@rules) < @media (min-width: 768px) < @rules(); >> // Mode: Desktop @desktop-area: 970px; .desktop(@rules) < @media (min-width: 1024px) < @rules(); >> // Area site .area < margin-left: auto; margin-right: auto; .tablet (< width: @tablet-area; >); .desktop (< width: @desktop-area; >); >

Такой метод удобен, если у вас медиа-запрос содержит не только типичные запросы вроде min-width и max-width , но и другие, например, определения Retina дисплея:

.retina(@rules) < @media only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) < @rules(); >> .brand < background-image: url("images/brand.png"); .retina (< background-image: url("images/brand@2x.png"); >); >

Случай пятый — Примесь с условием

Все мы знаем, что в Less нет условных конструкций (за что его многие ругают), хотя организовать их всё же можно:

.media(@screen, @rules) < @tablet-area: 750px; @desktop-area: 970px; & when (@screen = tablet) < @media (min-width: 768px) < @rules(); >> & when (@screen = desktop) < @media (min-width: 1024px) < @rules(); >> > // Area site .area < margin-left: auto; margin-right: auto; .media (tablet, < width: @tablet-area; >); .media (tablet, < width: @desktop-area; >); >

Какой метод лучше всего?

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

Делимся на оплату хостинга или кофе.
Чем чаще пью кофе, тем чаще пишу статьи.

Директива @media

Директива @media работает так же, как и стандартное правило CSS, только с дополнительными возможностями: директива может вкладываться в правила CSS. Если директива вложена в css-правило, то при компиляции она будет поднята наверх таблицы стилей, а все селекторы в которых была директива переместятся внутрь @media . Такой метод позволяет легко добавлять правила в @media без повторения селекторов или нарушения потока таблицы стилей. Например:

.sidebar  width: 300px; @media screen and (orientation: landscape)  width: 500px; > >

.sidebar width: 300px @media screen and (orientation: landscape) width: 500px

.sidebar  width: 300px; > @media screen and (orientation: landscape)  .sidebar  width: 500px; > >

@media запросы могут вкладываться друг в друга. После компиляции эти @media будут объединены оператором and .

@media screen  .sidebar  @media (orientation: landscape)  width: 500px; > > >

@media screen .sidebar @media (orientation: landscape) width: 500px

@media screen and (orientation: landscape)  .sidebar  width: 500px; > >

Ну и, наконец, @media запросы могут содержать в себе все возможности SassScript (включая переменные, функции и операторы) в именах компонентов и различных значений. Например:

$media: screen; $feature: -webkit-min-device-pixel-ratio; $value: 1.5; @media # and ($feature: $value)  .sidebar  width: 500px; > >

$media: screen $feature: -webkit-min-device-pixel-ratio $value: 1.5 @media # and ($feature: $value) .sidebar width: 500px

@media screen and (-webkit-min-device-pixel-ratio: 1.5)  .sidebar  width: 500px; > >

Создание и использование медиазапросов в Dreamweaver

Используйте визуальные медиазапросы для просмотра и редактирования веб-страниц с различными контрольными точками, соответствующими разным размерам экрана.

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

Вы можете добавлять медиазапросы в CSS, используя правило @media . Вы также можете создать отдельные таблицы стилей для разных типов носителей, а затем вызывать их, используя следующий синтаксис.

Браузер на устройстве проверяет медиазапрос и использует соответствующий файл CSS для отображения веб-страницы.

Дополнительные сведения см. в этой статье.

Можно добавлять медиазапросы путем вставки соответствующего кода в файлы HTML или CSS. Кроме того, Dreamweaver позволяет легко создавать и изменять медиазапросы следующими способами.

Панель визуального медиазапроса
Конструктор CSS

Панели визуального медиазапроса

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

Визуальный медиазапрос состоит из трех панелей в виде горизонтальных строк, каждая из которых представляет категорию медиазапроса.

Зеленый: медиазапросы с условиями максимальной ширины.
Синий: медиазапросы с условиями максимальной и минимальной ширины.
Сиреневый: медиазапросы с условиями минимальной ширины.

Примечание.

Медиазапросы на панели конструктора CSS также кодируются по этим цветам.

Каждая категория может состоять из одного или нескольких медиазапросов. Если условие медиазапроса в документе не определено, то соответствующая панель визуального медиазапроса также не отображается. Например, если документ не содержит условий минимальной ширины, то фиолетовая панель отображаться не будет.

Значения в ключевые моменты отображаются на панелях — минимальная ширина слева и максимальная ширина справа.

A. Точки останова B. Панели визуального медиазапроса C. Значок добавления медиазапроса D. Метка прокрутки

Скрытие и отображение визуальных медиазапросов

Панель визуальных медиазапросов отображается по умолчанию в режиме интерактивного просмотра. Чтобы скрыть панель, используйте переключатель панели визуальных медиазапросов на панели инструментов.

Переключение между точками останова

Для просмотра страницы определенного размера (точки останова) щелкните по соответствующей панели медиазапроса. Документ будет привязан к точке останова.

Также можно перетащить метку прокрутки к необходимой точке останова.

Чтобы изменить представление в соответствии с размером окна документа Dreamweaver, выполните одно из следующих действий:

Дважды щелкните по любому месту серой области в правой части документа, где будет отображен текст «Дважды щелкните для выравнивания по ширине». Если серая область не видна, перетащите метку прокрутки влево.
Выберите параметр «Полная ширина» в раскрывающемся списке в нижней части окна документа.

Изменение представления

Если вы не видите этот параметр, перетащите метку прокрутки, чтобы уменьшить размер веб-страницы.

Визуальное редактирование медиазапросов

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

Появятся элементы управления размером. Для медиазапросов с заданными значениями минимальной и максимальной ширины они отображаются по обеим сторонам панели.

Перетащите элементы до требуемого значения размера.

Новые значения минимальной и максимальной ширины будут автоматически применены к медиазапросам. Отображается уведомление о том, что медиазапрос успешно изменен. Если панели визуального медиазапроса соответствуют несколько медиазапросов, обновляются все медиазапросы. Число обновленных запросов будет показано вместе с сообщением об успешном выполнении.