Почему адаптивным веб-дизайнам необходимы медиазапросы?

Без такого CSS3 модуля, как медиазапросы, мы не смогли бы нацеливать отдельные CSS стили на определенные характеристики устройств, например ширину области просмотра. Если вы заглянете в W3C-спецификацию этого CSS3 модуля (http://www.w3.org/TR/css3-mediaqueries/), то увидите следующее официальное описание медиазапросов:

«В настоящее время HTML4 и CSS2 поддерживают медиазависимые таблицы стилей, предназначенные для разных медиатипов. Например, в документе могут использоваться шрифты семейства sans-serif, когда он отображается на экране, и шрифты семейства serif, когда он выводится на печать. Screen и print — это два медиатипа, которые были определены. Медиазапросы расширяют функциональность медиатипов, позволяя присваивать более точные метки таблицам стилей.

Медиазапрос состоит из медиатипа, а также выражений в количестве от 0 и более, которые проверяют состояние определенных медиафункций. К числу медиафункций, которые могут быть использованы в медиазапросах, относятся width, height и color. Применяя медиазапросы, можно приспособить представления к определенному диапазону устройств, не изменяя содержимое».

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

Как выглядит CSS код медиазапросов и, что более важно, как они работают?

Наберите приведенный далее код в конце любого CSS файла, а затем откройте связанную с ним веб-страницу в браузере:

Body {background-color: grey;

}

@media screen and (max-width: 960px) {body {background-color: red;

}

}

@media screen and (max-width: 768px) {body {

Background-color: orange;

}

}

@media screen and (max-width: 550px) {body {

Background-color: yellow;

}

}

@media screen and (max-width: 320px) {body {

Background-color: green;

}

}

Теперь откройте свою веб-страницу в современном браузере (для Internet Explorer как минимум в версии 9) и измените размеры окна браузера. Фоновый цвет страницы будет изменяться в зависимости от текущих размеров области просмотра. Для ясности в приведенном чуть выше коде я использовал именованные цвета, однако обычно для указания цветов применяется шестнадцатеричный код, например #ffffff.

Проанализируем медиазапросы, чтобы понять, как их наиболее эффективно использовать.

Если вам доводилось работать с таблицами стилей CSS2, то вы уже знаете, что можно задавать тип устройства (например, screen или print), соответствующий той или иной таблице стилей, в атрибуте media тега <link>. Для этого необходимо указать ссылку, как это сделано в приведенном далее фрагменте, в тегах <head> в HTML-коде:

<link rel="stylesheet" type="text/css" media="screen" href="screenstyles. css">

Медиазапросы в основном обеспечивают возможность нацеливать стили, исходя из возможностей или характеристик устройства, а не только из его типа. Считайте все это вопросом, задаваемым браузеру. Если браузер выдает в ответ true, то применяются соответствующие стили. Если же он ответит false, то стили не используются. Вместо того чтобы спрашивать у браузера: «Это устройство с экраном?» — лучше воспользоваться медиазапросом. Он позволяет задать такой вопрос: «Это устройство с экраном в книжной ориентации?» Взглянем на пример:

<link rel="stylesheet" media="screen and (orientation: portrait)" href="portrait-screen. css" />

Сначала выражение медиазапроса спрашивает о типе («это устройство с экраном?»), а затем — о характеристике («в книжной ориентации?»). Таблица стилей portrait-screen. css станет загружаться, если речь будет идти о любом устройстве с экраном, имеющим книжную ориентацию, и игнорироваться для всех остальных. Логику любого медиазапроса можно реверсировать, добавив not в его начало. Например, следующий код обеспечит противоположный результат, нежели наш предыдущий образец, загружая соответствующий файл для любого устройства, не имеющего экрана в книжной ориентации:

<link rel="stylesheet" media="not screen and (orientation: portrait)" href="portrait-screen. css"

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

<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px)" href="800wide-portrait-screen. css" />

Более того, мы можем указать целый список медиазапросов. Если в результате выполнения какого-либо из них мы получим ответ true, то соответствующий файл будет загружен. В противном случае файл загружаться не будет. Вот пример:

<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px), projection" href="800wide-portrait-screen. css" />

Здесь необходимо отметить два момента. Во-первых, медиазапросы отделены друг от друга запятыми. Во-вторых, в конце после projection нет and или комбинации «параметр/значение» в круглых скобках. Это потому, что при отсутствии таких значений медиазапрос будет охватывать все медиатипы. В нашем примере стили будут применяться для всех устройств, являющихся проекторами.

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

@media screen and (max-device-width: 400px) {h1 {color: green}

}

Мы также можем использовать CSS правило @import для условной загрузки таблиц стилей в нашу имеющуюся таблицу стилей. Например, приведенный далее код импортирует таблицу стилей с именем phone. css при условии, что определенное устройство будет иметь экран, а также располагать областью просмотра с максимальной шириной 360 пикселов:

@import url ("phone. css") screen and (max-width:360px);

Помните, что применение CSS правила @import приводит к увеличению количества НТТР-запросов (что, в свою очередь, отрицательно сказывается на скорости загрузки), поэтому используйте этот метод умеренно.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *