Адаптивная верстка сайтов | Медиа-запросы

Адаптивная верстка сайтов | Медиа-запросы

Медиа-запросы (Media Queries) — основной инструмент современного верстальщика сайтов, когда речь идет об адаптивной верстке. В двух словах медиа-запросы — это отдельные наборы правил в файле стилей CSS. Каждый из таких дополняющих наборов отвечает за тот или иной способ отображения сайта.

Например, за ширину окна конкретного девайса: настольного монитора, смартфона или планшета, а в случае с последними двумя также и за ориентацию в пространстве (альбомная или книжная или по-буржуйски landscape и portrait).

Принцип действия медиа-запросов

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

В самом простом виде медиа-запрос какбэ говорит: «Если окно браузера не более такого-то размера (задано в пикселях), то показывать сайт так-то и так-то…»

Пример:

@media screen and (max-width: 1000px) {
#content {
width: 75%;
float: left;
}

#sidebar {
width: 25%;
float: right;
}
}

Здесь медиа-запрос говорит, что если ширина экрана не более 1000 пикселей, то ширина основного блока (content) составит 75%, а ширина боковой колонки (sidebar) будет 25%. Надеюсь, все помнят, что в адаптивной верстке используется принцип «резиновой» разметки, поэтому все размеры в %, а не в пикселах.

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

Обратите внимание на синтаксис. Медиа-запрос — это типичный набор правил и заключен в фигурные скобки. Но в отличие от обычных правил CSS, в него могут входить другие наборы правил, также заключенные в фигурные скобки, причем друг от друга они никакими знаками не отделяются. Такой себе своеобразный вложенный дополнительный набор правил а ля «все в одном».

Словосочетание screen and следует читать так: «для всех устройств с цветным экраном И для тех, у кого экран меньше 1000 пикселей».

Позвольте, но ведь есть и гораздо меньшие устройства, как с этим быть? Очень просто! Пишем еще один медиа-запрос:

@media screen and (max-width: 480px) {
#content {
width: 100%;
float: none;
}

#sidebar {
width: 100%;
float: none;
}
}

Данный медиа-запрос говорит, что если ширина экрана окажется менее 480 пикселей, то сработает новый набор правил, где у обоих блоков ширина 100% и отменено обтекание. Очень удобно и наглядно.

Также очень легко можно настроить стили для отображения сайта в книжной или альбомной ориентации экрана. Например:

@media screen and (max-width: 320px) and (orientation: portrait) {
#content {
width: 75%;
float: none;
}

#sidebar {
width: 25%;
float: none;
}
}

@media screen and (max-width: 480px) and (orientation: landscape) {
#content {
width: 80%;
float: none;
}

#sidebar {
width: 20%;
float: none;
}
}

Эти два медиа-запроса говорят следующее: «Если экран не более 320 пикселей и расположен вертикально, то ширина основного блока составит 75%, а боковой колонки 25%. А если ширина не более 480 пикселей и расположение горизонтальное, то соответственно 80% и 20%. То есть, во втором случае под основной блок выделено чуть больше места, что бывает удобно при чтении текста.

Кроме того, в медиа-запросе можно устанавливать диапазон ширины экрана от минимального до максимального:

@media screen and (min-width: 200px) and (max-width: 480px) {
#content {
width: 80%;
float: none;
}

#sidebar {
width: 20%;
float: none;
}
}

Данная запись говорит, что набор правил этого медиа-запроса будет работать на устройствах (или при размере окна браузера настольного монитора) от 200 до 480 пикселей. Если будет больше или меньше, то правила не сработают. Иногда удобнее задавать именно диапазон действия медиа-запроса.

Характеристики медиа-запросов

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

  • height — высота области просмотра;
  • device-width — ширина поверхности, на которой происходит просмотр (т.е. непосредственно ширина экрана конкретного девайса);
  • device-height — высота поверхности, на которой происходит просмотр;
  • orientation — ориентация экрана устройства (книжная или альбомная);
  • aspect-ratio — соотношение ширины и высоты в зависимости от ширины и высоты области просмотра. Например, широкоэкранный дисплей с соотношением сторон 16:9 может быть указан, как aspect-ratio: 16/9;
  • color — количество бит на каждый из цветовых компонентов. Например, min-color: 16 будет означать, что экран конкретного устройства имеет 16-битную глубину цвета;
  • и др.

На практике чаще всего используется только значение ширины области просмотра — width. Остальные характеристики пока еще экзотика. Есть некоторая разница между width и device-width. Об этом я, пожалуй, напишу отдельный пост, чтобы не перегружать тему. Скажу лишь, что использование device-width бывает полезным, когда ориентируешься на конкретный девайс. Фишка тут вот в чем:

Браузеры мобильных устройств на самом деле имеют в запасе гораздо больший размер экрана, чем показывают. Сделано это для того, чтобы пользователь мог при желании увеличить картинку и рассмотреть часть сайта более крупно. В результате, если вы в медиа-запросе зададите набор правил @media screen and (max-width: 480px), используя простой width, то на смартфоне все равно увидите сайт так, словно он просматривается на большом мониторе, только все будет очень мелким. Происходит такая нестыковка как раз по причине «запаса» браузера мобильного устройства. Чтобы этого не случилось, нужно использовать в медиа-запросе не просто width, а именно device-width. Либо применять такую штуку как мета-тег viewport, но об этом в следующий раз.

Где лучше всего размещать медиа-запросы?

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

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

Как изменить html разметку в медиа-запросе

Нет ничего проще! Обычно медиа-запросы размещаются в том же файле стилей CSS, что и остальные правила, но в самом конце. Иногда их выносят в отдельный файл. Некоторые вебмастера вообще создают несколько файлов стилей с разными медиа-запросами. Это имеет смысл, если сайт очень сложный. Тогда чтобы не запутаться в правилах имеет смысл вынести медиа-запросы отдельно по каждому разделу многоуровнего сайта.

На этом по медиа-запросам все. Демо-сайт в качестве примера будет разобран в одной из ближайших статей. Так что оставайтесь на связи! И пишите вопросы в комментариях.

Адаптивная верстка сайтов | Введение
Адаптивная верстка сайтов | Медиа-запросы
Адаптивная верстка сайтов | Сначала мобильные

16.08.2014

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (12 votes, average: 5,00 out of 5)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

16 комментариев

  1. Алексей

    27.12.2014

    Здравствуйте! Спасибо за полезные статьи. Жаль, что новых давно не появляется по этой теме :(

  2. Игорь Квентор
    http://www.websovet.com/
    28.12.2014

    Здравствуйте, Алексей! Спасибо за отзыв! Скоро все будет :)

  3. Дмитрий

    03.01.2015

    Добрый вечер! А возможно, чтобы медиа запросы срабатывали только для телефонов? Потому как, для андроида FLY пришлось указать max-width: 1024px, так как, если меньше прописать пиксели, уже стили не применяются, я для монитора стили тоже срабатывают при 1024px (что и не хочется), просто на телефоне криво отображает некоторые элементы. С уважением, Дмитрий!

  4. Alex
    http://www.dzerteatr.ru
    18.01.2015

    Спасибо! Очень интересно, жду продолжения! И,если позволите. вопрос.
    На моем сайте есть слайдер, его параметры прописаны в абсолютных величинах (размеры фото-файлов). На смартфоне они отображаются как миниатюры, не заполняя все отведенное для них место.
    Нужно в параметрах самого слайда менять размеры всех фото на резиновые, или изменить размер слайда?

  5. Игорь Квентор
    http://www.websovet.com/
    18.02.2015

    Я думаю, надо заменить абсолютные размеры картинок.

  6. Александр

    14.04.2015

    Как скоро будет продолжение?
    У меня есть вопрос по @media queries меня интересует приоритет как правильно нужно его использовать то есть везде пишут что начинает делать от мобильной версии до большого дисплея то есть мы начинаем писать @media queries например 240, 320, 480 и так … и тут начинает играть приоритет и приходится как то подстраиваться менять местами положения @media queries и мне не понятно это нормально или нет как быть в этом положении.

  7. Игорь Квентор
    http://www.websovet.com/
    10.12.2016

    Александр, продолжение следует :) По поводу приоритета для мобильных дело обстоит не совсем так, как вы это себе представляете. Начинают писать код не с медиа-запросов, от минимальных до больших размеров, а с того, как сайт будет выглядеть на мобильном устройстве. Потом код уже обрастает различными условиями и деталями.
    Например, нам надо реализовать простое меню. На мобилке это практически всегда вертикальный список. То есть, то, что обычно в html идет по-умолчанию для всех списков. Поэтому нам не нужно к нему применять какие-то особые стили по вытягиванию пунктов меню в линию. А вот на версии для ПК это меню часто делают как раз горизонтальным. Соответственно, пунктам списка li надо задать отображение display: inline; Вот это правило вы и добавляете в медиа-запросе для больших экранов.

  8. Сергей

    27.06.2016

    Доброго времени суток. Скажите пожалуйста, можно ли при использовании media, скрыть блок в одном месте и показать в другом ? Например иконки соц сетей при большом размере в хедере, а при мобильной версии хочу уронить их в футер. Такое возможно ?

  9. Игорь Квентор
    http://www.websovet.com/
    10.12.2016

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

  10. Елена

    26.01.2017

    Здравствуйте.Не первый раз прописываю медиа-запросы и было все нормально. Но сейчас столкнулась с такой проблемой:не срабатывает запрос, когда устанавливаю max-width. Значения меняются только при min-width, но мне то нужно чтобы перемены происходили до определенной ширины, а не после. Возможно вы сможете мне подсказать, почему такое может происходить?

  11. Игорь Квентор

    26.01.2017

    Елена, покажите ваш сайт, тогда смогу что-то подсказать вам.

  12. Елена

    27.01.2017

    Игорь, вот сайт — _http://darina-vdovichenco.ru/

  13. Елена

    27.01.2017

    Всего одна страничка, и не работают медиа-запросы max. Верстала визитку и для вордпресс, все было нормально. Например, _http://domashnie-xlopoty.net/ Учитывайте, пожалуйста, что я не профессионал, увлеклась версткой недавно, практикуюсь на своих родственниках и друзьях) Если сможете подсказать, что не так с медиа, буду благодарна.

  14. Игорь Квентор
    http://www.websovet.com/
    27.01.2017

    Елена, на сайте darina-vdovichenco.ru медиа-запросов у вас просто нет, потому ничего и не работает. То, что вы указали в наборе правил для блока .wrapper max-width: 1200px; — еще не делает сайт адаптивным. Это всего лишь указание на то, что блок не должен превышать по ширине 1200 пикселей. Медиа-запросы начинаются со слова @media и содержат отдельные наборы правил для разных размеров экрана.

  15. Елена

    27.01.2017

    Игорь, я знаю) У меня нет медиа-запросов, потому что, когда я их пишу, они не срабатывают. Именно max. Я специально прописала одно правило, как пример, чтобы вы видели, что не работает. Точно так же не работает ничего, чтобы я не прописала в правилах.Картинка не исчезает. Однако, если заменить max на min, срабатывает, только не в нужную мне сторону. В инструментах для разработчика можно попробовать. То есть, дело не в том, что я пропишу в правилах, а…. не знаю в чем. Код перепроверила, все запятые, двоеточия и скобочки на месте. Гугл перегуглила. Не нашла ничего. Буду искать дальше. Спасибо, что попытались мне помочь)

  16. Игорь Квентор

    27.01.2017

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

Оставить комментарий: