Адаптивный дизайн на основе медиа-запросов. CSS - Медиа запросы (media queries) Медиа запросы что такое

Статья, в которой познакомимся с медиа запросами и научимся применять их для создания адаптивных сайтов. Рассмотрим основные конструкции media запросов для использования их в вёрстке страниц с использованием фреймворков Bootstrap 3 и Bootstrap 4.

Что такое медиа запросы?

Медиа запросы (media queries) - это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений технических параметров устройств. Иными словами, это конструкции, которые позволяют определять на основании некоторых условий какие стили необходимо использовать на веб-странице, а какие нет.

Медиа запросы появились в спецификации CSS3 и на сегодняшний день поддерживаются во всех современных браузерах (Chrome 4+, Firefox 3.5+, IE 9+, Opera 9+, Safari 4+).

Поддержка медиа запросов в браузере IE8 осуществляется посредством подключения к странице скрипта respond.js:

Медиа запросы предназначены для создания адаптивных дизайнов сайтов. Адаптивный дизайн отличается от других тем, что он может "приспосабливаться" (видоизменяться) в зависимости от того, какую ширину экрана имеет устройство (браузер). Более подробно познакомиться с адаптивным дизайном можно в статье "Что такое адаптивная разметка" .

Но при создании адаптивных веб-страниц также необходимо обратить внимание на метатег viewport. Данный тег обеспечивает корректное отображение дизайнов адаптивных сайтов на экранах устройств, имеющих высокую плотность пикселей. Иными словами, он устанавливает соответствие между CSS и физическим разрешением веб-страницы. Более подробно разобраться, как работает метатег viewport можно в статье "Знакомство с meta viewport" .

Подключение метатега viewport к странице в большинстве случаях осуществляется так:

Синтаксис медиа запросов

Для создания медиа запросов используется следующий синтаксис:

@media условие { /* стили (они будут выполняться, если устройство соответствует указанному условию) }

Основные типы устройств:

all - все устройства (по умолчанию).
print - принтеры и режим предварительного просмотра страницы перед печатью.
screen - устройства с дисплеями.

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

and - требует обязательного выполнения всех указанных условий.
Например: @media screen and (min-width: 1200px) and (orientation: landscape) { /* Стили CSS ... */ } Стили CSS в вышеприведённом примере выполняться только в том случае, если страница будет выводиться на устройство с экраном, иметь область просмотра более 1200 пикселей в ширину, а также находиться в альбомном режиме.
, (запятая) - требует обязательного выполнения хотя бы одного из указанных условий в медиа запросе. @media (min-width: 544px), (orientation: landscape) { /* Стили CSS ... */ } Стили CSS в этом примере будут применяться к странице в двух случаях. Т.е. тогда, когда устройство будет иметь viewport не менее 544 пикселей (включительно) или ориентацию landscape.
not - предназначен для отрицания указанного условия. Имеет по отношению к оператору and меньший приоритет, т.е. оператор not всегда выполняется после and . @media not screen and (orientation: portrait), (min-width: 992px) { /* Стили CSS ... */ } Стили CSS, находящиеся в этом правиле, будут применены к странице только в том случае, если устройство не является screen и не будет иметь портретную ориентацию. А также они (стили CSS) будут применены к элементам документа ещё тогда, когда устройство (браузер) будет иметь ширину рабочей области не менее 992 пикселя (включительно).
Т.е. запрос в вышеприведённом примере будет обрабатываться так: @media not (screen and (orientation: portrait)), (min-width: 992px) { /* Стили CSS ... */ }

Медиа функции

Для составления условия в @media можно использовать следующие фукнции:

width - указывает требования к ширине области просмотра устройства (браузера). /* применить стили CSS только для устройств с шириной области просмотра, равной 320px */ @media (width: 320px) { /* Стили CSS ... */ }
min-width - задаёт минимальную ширину области viewport в px , em или других единицах. /* для устройств (браузеров), которые предоставляют для страницы минимальную ширину области просмотра, равную 544 пикселя */ @media (min-width: 544px) { /* Стили CSS ... */ }
max-width - указывает на то, какой должна быть максимальная рабочая область устройства (браузера). /* стили, которые будут применены к элементам страницы с рабочей областью не больше 1199 пикселей */ @media (max-width: 1199px) { /* Стили CSS ... */ }
height , min-height и max-height - задают требования аналогично вышеприведённым функциям, но в отношении высоты viewport. /* стили, которые будут применены к элементам страницы в том случае, если viewport браузера будет больше 720px в высоту */ @media (min-height: 720px) { /* Стили CSS ... */ }
orientation - функция, которая проверяет то, в каком режиме (portrait или landscape) отображается страница.
Пример, в котором в зависимости от ориентации экрана, отображается одна или другая картинка: /* landscape (альбомный) - это режим, в котором наоборот ширина viewport больше её высоты */ @media (orientation: landscape) { #background-image { background: url(image1.png) no-repeat; } } /* portrait (портретный) - это режим, в котором высота viewport больше ширины */ @media (orientation: portrait) { #background-image { background: url(image2.png) no-repeat; } }
aspect-ratio (min-aspect-ratio , max-aspect-ratio) - позволяют указать то, как ширина устройства должна относиться к высоте. В качестве значений допускается использовать только целые значения. /* для дисплеев с соотношением сторон 16/9 */ @media screen and (device-aspect-ratio: 16/9) { /* Стили CSS ... */ } /* для дисплеев с соотношением сторон 1336/768 */ @media screen and (device-aspect-ratio: 1336/768) { /* Стили CSS ... */ }
resolution (min-resolution , max-resolution) - указывает разрешение (плотность пикселей) устройства вывода. В качестве единиц измерения разрешения используются следующие величины: dpi (количество точек на дюйм), dpcm (количество точек на сантиметр), dppx (количество точек на пиксель). /* для экранов, имеющих высокую плотность пикселей (т.е. для таких, у которых отношение аппаратных пикселей к CSS не менее 2) */ @media screen and (min-resolution: 2dppx) { /* Стили CSS ... */ } /* при печати с разрешением свыше 300 точек на дюйм */ @media print and (min-resolution: 300dpi) { /* Стили CSS ... */ }

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

Медиа запросы также можно применять в качестве значения атрибута media элемента link . Это позволит в зависимости от параметров устройства определить, какие файлы CSS необходимо подсоединить к странице, а какие нет. Обычно данный функционал используется тогда, когда к разным классам устройств необходимо применить различные стили CSS.

Кроме этого медиа запросы можно также использовать в правиле @import , которое предназначено для импортирования стилей из других файлов CSS в текущий.

/* импортирование стилей из файла styles-xs.css в текущий файл стилей только для устройств, которые предоставляют веб-странице viewport, имеющий ширину 543 пикселя или меньше. */ @import url(styles-xs.css) (max-width: 543px);

Медиа запросы для Bootstrap 3

Организация media queries в порядке возрастания классов устройств xs, sm, md и lg (по умолчанию):

/* Устройства с очень маленьким экраном (смартфоны, меньше 768px) */ /* Стили CSS (по умолчанию) - для ширины viewport 1200px */ }

Вышеприведённые запросы необходимо использовать только в указанном порядке.

Для того чтобы media запросы можно было применять в какой угодной последовательности, их необходимо расширить включив в них дополнительно выражение max-width . Это заставит их работать только в указанном диапазоне.

@media (max-width: 767px) { /* стили для xs-устройств */ } @media (min-width: 768px) and (max-width: 991px) { /* стили для sm-устройств */ } @media (min-width: 991px) and (max-width: 1199px) { /* стили для md-устройств */ } @media (min-width: 1200px) { /* стили для lg-устройств */ }

Медиа запросы для Bootstrap 4

Синтаксис медиа-запросов для Bootstrap 4, которые можно использовать только в следующем порядке (последовательного увеличения минимальной ширины viewport):

/* xs - устройства (до 576px) */ /* CSS для ширины, которая меньше 575px (включительно) */ /* sm-устройства (больше или равно 576px) */ @media (min-width: 576px) { /* CSS для: 576px = 1200px */ }

Список media запросов для фреймворка Bootstrap 4, которые можно применять только в обратном порядке (в порядке убывания ширины области просмотра окна браузера):

/* xl-размер (>=1200px) */ /* CSS для >=1200px */ /* lg-размер (
widget

footer

HTML5.js Обратите внимание, что в демо используется HTML5. Internet Explorer ниже 9-й версии не поддерживает новые элементы содержащиеся в HTML5, такие как , , , и прочие. Поэтому подключаем Javascript файл html5.js в HTML документ, который позволит IE понимать новые элементы.

CSSСбрасываем HTML5 элементы в block Следующий CSS сделает HTML5 элементы (article, aside, figure, header, footer, etc.) блочными.
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display : block ;
} Описываем основную структуру в CSS Я снова не буду вдаваться в подробности. Основной контейнер «pagewrap» имеет ширину 980px. «Header» имеет фиксированную высоту 160px. Контейнер «content» шириной 600px и прижат влево. «Sidebar» шириной 280px и прижат вправо.
#pagewrap {
width : 980px ;
margin : 0 auto ;
}
#header {
height : 160px ;
}
#content {
width : 600px ;
float : left ;
}
#sidebar {
width : 280px ;
float : right ;
}
#footer {
clear : both ;
} Шаг 1 На первом шаге в демо не реализованы media queries, поэтому при изменении размера окна браузера, макет будет оставаться фиксированной ширины.CSS3 Media Queries Теперь начинается самое интересное – media queries .Подключаем Media Queries Javascript Internet Explorer 8 и более ранних версий не поддерживает CSS3 media queries. Вы можете включить ее, добавив Javascript файл css3-mediaqueries.js .

Подключаем CSS media queries Создаем новый CSS файл для media queries. Посмотрите мою прошлую статью, что бы увидеть как работают media queries .
Размер экрана меньше 980px (резиновый макет) Для размера экрана меньше 980px применим следующие правила:

pagewrap = ширина 95%;
content = ширина 60%;
sidebar = ширина 30%.

Совет: используйте проценты (%), чтобы сделать блоки резиновыми.
@media screen and (max-width: 980px) {
#pagewrap {
width : 95 % ;
}
#content {
width : 60 % ;
padding : 3 % 4 % ;
}
#sidebar {
width : 30 % ;
}
#sidebar .widget {
padding : 8 % 7 % ;
margin-bottom : 10px ;
}
}
Размер экрана меньше 650px (одноколоночный макет) Затем, задаем CSS правила для размера экрана меньше 650px.

header = сбрасываем высоту в auto;
searchform = позиционируем - 5px сверху;
main-nav = сбрасываем позиционирование в static;
site-logo = сбрасываем позиционирование в static;
site-description = сбрасываем позиционирование в static;
content = устанавливаем ширину auto (это растянет контейнер на всю ширину)
sidebar = устанавливаем ширину 100% и убираем float.

@media screen and (max-width: 650px) {
#header {
height : auto ;
}
#searchform {
position : absolute ;
top : 5px ;
right : 0 ;
}
#main-nav {
position : static ;
}
#site-logo {
margin : 15px 100px 5px 0 ;
position : static ;
}
#site-description {
margin : 0 0 15px ;
position : static ;
}
#content {
width : auto ;
float : none ;
margin : 20px 0 ;
}
#sidebar {
width : 100 % ;
float : none ;
margin : 0 ;
}
} Размер экрана меньше 480px Этот CSS будет применяться для размеря экрана меньше 480px, которая соответствует ширине iPhone в альбомной ориентации.

html = отключаем регулировку размера шрифта. По умолчанию iPhone увеличивает размер шрифта, для более комфортного чтения. Вы можете это отключить добавив -webkit-text-size-adjust: none;
main-nav = сбрасываем размер шрифта до 90%.

@media screen and (max-width: 480px) {
html {
-webkit-text-size-adjust: none ;
}
#main-nav a {
font-size : 90 % ;
padding : 10px 8px ;
}
} Эластичные изображения Для того, чтобы сделать изображения эластичными, просто добавьте max-width:100% и height:auto . Изображения max-width:100% и height:auto работает в IE7, но не работает в IE8 (да, еще один странный баг). Для исправления нужно добавить width:auto\9 для IE8.
img {
max-width : 100 % ;
height : auto ;
width : auto \9 ; /* ie8 */
} Эластичные встраиваемые видео Для видео применяем те же правила, как для изображений. По непонятным причинам max-width:100% (для видео) не работает в Safari. Нужно использовать width: 100% .
.video embed ,
.video object,
.video iframe {
width : 100 % ;
height : auto ;
} Initial Scale Meta Tag (iPhone) По умолчанию iPhone Safari сжимает станицы, что бы вместить в экран. Следующий мета-тег говорит iPhone Safari использовать ширину устройства как ширину окна и отключить.
Финальное Демо Откроем финальное демо и поизменяем размер экрана, что бы увидеть media queries в действии. Не забудьте проверить в iPhone, iPad, Blackberry (последние версии) и Android телефонах, что бы увидеть мобильную версию.

Перевод

Разрешение экрана в наши дни колеблется от 320px (iPhone) до 2560px (большие мониторы) или даже выше. Пользователи больше не просматривают сайты только на настольных компьютерах. Теперь пользователи используют мобильные телефоны, небольшие ноутбуки, планшетные устройства, такие как iPad или Playbook для доступа в интернет. Поэтому, традиционный дизайн с фиксированной шириной больше не работает. Дизайн должен быть адаптивным. Структура должна автоматически изменяться с учетом всех разрешений дисплеев. Эта статья покажет вам как создавать кросс-браузерный адаптивный дизайн при помощи HTML5 и CSS3 media queries.

Для начала посмотрим это в действии. Пред началом посмотрите на финальное демо , что бы увидеть, как хорошо это выглядит. Изменяйте размер браузера, что бы увидеть как структура автоматически изменяется основываясь на ширине окна.Другие примеры Если вы хотите увидеть больше примеров, посмотрите следующие темы для WordPress , которые я сделал используя media queries: iTheme2 , Funki , Minblr и Wumblr .Обзор Контейнер страницы имеет ширину 980px для любого разрешения, больше 1024px. Для проверки ширины используются media queries, если ширина меньше чем 980px, в этом случае макет становится резиновым, вместо фиксированной ширины. Если ширина меньше 650px, то контейнеры с контентом и боковой панелью расширяются на полный экран и становятся в одну колонку.

HTML Не будем останавливаться на подробном описании HTML. Ниже описана основная структура макета. У меня есть «pagewrap», который включает в себя «header», «content», «sidebar» и «footer».

Demo
Site Description

Home

blog post

class = "widget" >
widget

footer

HTML5.js Обратите внимание, что в демо используется HTML5. Internet Explorer ниже 9-й версии не поддерживает новые элементы содержащиеся в HTML5, такие как , , , и прочие. Поэтому подключаем Javascript файл html5.js в HTML документ, который позволит IE понимать новые элементы.

CSSСбрасываем HTML5 элементы в block Следующий CSS сделает HTML5 элементы (article, aside, figure, header, footer, etc.) блочными.
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display : block ;
} Описываем основную структуру в CSS Я снова не буду вдаваться в подробности. Основной контейнер «pagewrap» имеет ширину 980px. «Header» имеет фиксированную высоту 160px. Контейнер «content» шириной 600px и прижат влево. «Sidebar» шириной 280px и прижат вправо.
#pagewrap {
width : 980px ;
margin : 0 auto ;
}
#header {
height : 160px ;
}
#content {
width : 600px ;
float : left ;
}
#sidebar {
width : 280px ;
float : right ;
}
#footer {
clear : both ;
} Шаг 1 На первом шаге в демо не реализованы media queries, поэтому при изменении размера окна браузера, макет будет оставаться фиксированной ширины.CSS3 Media Queries Теперь начинается самое интересное – media queries .Подключаем Media Queries Javascript Internet Explorer 8 и более ранних версий не поддерживает CSS3 media queries. Вы можете включить ее, добавив Javascript файл css3-mediaqueries.js .

Подключаем CSS media queries Создаем новый CSS файл для media queries. Посмотрите мою прошлую статью, что бы увидеть как работают media queries .
Размер экрана меньше 980px (резиновый макет) Для размера экрана меньше 980px применим следующие правила:

pagewrap = ширина 95%;
content = ширина 60%;
sidebar = ширина 30%.

header = сбрасываем высоту в auto;
searchform = позиционируем - 5px сверху;
main-nav = сбрасываем позиционирование в static;
site-logo = сбрасываем позиционирование в static;
site-description = сбрасываем позиционирование в static;
content = устанавливаем ширину auto (это растянет контейнер на всю ширину)
sidebar = устанавливаем ширину 100% и убираем float.

html = отключаем регулировку размера шрифта. По умолчанию iPhone увеличивает размер шрифта, для более комфортного чтения. Вы можете это отключить добавив -webkit-text-size-adjust: none;
main-nav = сбрасываем размер шрифта до 90%.

Сейчас в нашу жизнь вошло столько устройств, которые позволяют свободно бороздить интернет, что уже не отвечают веениям времени еще недавно преобладающие методы верстки сайтов. Так-как сейчас все больше как маленьких экранов мобильных смартфонов, так и больших экранов десктопов. Я как-то об этом не задумывался и как обычно делал свои сайты под экраны 1024px. Но посмотрев разрешение экранов посещающих мои сайты в яндекс метрике, был удевлен что 1024px уже не актуален и разнообразие разрешений просто огромное. А трафик с маленьких экранов мобильных устройств состовляет почти 20%. Вот скриншот из яндекс метрики одного из моих сайтов, о котором пойдет речь далее.

Разрешения экранов Основные разрешения экранов, посещающие сайт, статистика за месяц

Получается что на каких-то устройствах сайт отображается очень мелко, на каких-то с горизонтальной прокруткой, а на больших экранах с пустыми полями по бокам и сайт выглядит очень маленьким. Так-же и гугл оповестил что "ваш сайт не оптимизирован для мобильных устройств". Ниже пример как сайт выглядил до оптимизации на разных разрешениях от мобильников 240*320px, до 1920*1200px.

Скриншот сайта на разных экранах

Скрин сайта на разрешении дисплеев 320px 800px 1280px 1920px

Приступив к оптимизации я первым делом добавил мета тег в body сайта. Сервис гугл для проверки оптимизации сказал что "сайт оптимизирован". Но на самом деле это не так. Данный тег заставляет сайт отображаться пиксель в пиксель, то-есть в зависимости от фактического разрешения экрана, определяет область просмотра. Так например на 320*480px будет отображаться только кусочек сайта, а на больших экранах пустые области.

Для отображения сайта пиксель в пиксель Ниже код, который заставляет отображать сайт пиксель в пиксель на всех устройствах. И если у маленького экрана разрешение к примеру 6дюймов и 1280*800, то сайт будет малюсенький. А если экран 320*480px, то на экране отобразится кусочек сайта этих размеров. В данном примере значение 1:1, то-есть рано 1.0. Можно ставить свои значения и увеличивать или уменьшать сайт. К примеру на андроид и apple область просмотра сайтов 960-1024px, это значит что сайты с такой шириной будут отображаться на весь экран и без прокрутки, и это не зависит от фактического разрешения экрана, сайт просто масштабируется под размер экрана, Но если добавить этот тег То сайт начнет отображаться в соответствии с аппаратными пикселями, и если разрешение маленькое, то сайт будет слишком крупным и появится прокрутка, а если разрешение большое, то сайт будет маленьким. По-этому один этот viewport ничего не решает, он просто отображает сайт в соответствии с аппаратными пикселями, и отменяет настройки браузеров, что не правильно так-как у браузеров могут буть свои настройки. Верстка сайта под разные экраны Чтобы адаптировать сайт я добавил в boby сайта вот этот список мета тегов. viewport - заставляет сайт отображаться в соответствии с пикселями устройства. screen and - позволяет назначать CSS стили в зависимости от разрешения экрана. Так например запись Указывает что для экранов с разрешением меньше 640px нужно применить стиль из файла style.css Так-же можно указывать стили в одном файле или распределить по разным css файлам. В css файле стиль для экранов как в данном примере max-width:640px делается так /*для мобильных устройств*/ @media screen and (max-width: 640px) { aside {width:98%;} article {width:98%;} #container {font-size:120%;} #razdeli_opisanie {width:95%;} } @media screen and (max-width: 1024px) { body {font-size:85%;} } @media screen and (min-width: 1280px) { body {font-size: 100%;} . Стили css назначаются с помощью @media screen and (min-width: ХХХpx) @media screen and (max-width: 640px) { ваши стили } Так-же можно указать стили для конкретных экранов, например (width: 480px), но сейчас там много разрешений что смысла нет писать большой css фаил чтобы для каждого конкретного экрана написать свои правила отображения. Я просто сделал резиновую верстку сайта в основных стилях. И если например разрешение экрана меньше (max-width: 640px), то все блоки у меня растягиваются по ширине экрана. А если экран от 640-1024px (max-width: 1024px), то я меняю только шрифт body {font-size: 85%;}, так-как по умолчанию он в браузерах 16px, а я его делаю 14px. Если разрешение (min-width: 1280px), то-есть 1280px и более, то я просто увеличил шрифт до 100%, а сайт в основной верстке расстягивается по ширине экрана.

То-есть я сделал резиновую верстку сайту, и подкорректировал указав некоторые css правила для отдельных разрешений экрана. В итоге сайт стал выглядеть вот так.

Скриншоты сайта е ветерок ру

Скриншоты в размерах 320px 640px 800px 1024px 1280px 1920px

Надеюсь что вам стало понятно как сделать. Думаю как сделать основную резиновую верстку вы и так знаете. Я к примеру все размеры указал в процентах (%) вместо пикселей (px). И указал дополнительно стили под различные разрешения экранов. Но этот сайт я пока не адаптировал под разные экраны, на момент написания этой статьи размеры сайта указаны 995px и все размеры в px.