Как провести настройку адаптивных тем для WordPress: часть четвертая

В четвертой статье нашего цикла мы перейдем к более тщательному изучению медиа запросов в рамках адаптивных тем для WordPress. Не переживайте, это не так сложно, как вы могли бы подумать. Обладая высокой мощью и гибкостью, медиа запросы остаются достаточно простыми для понимания. Отметьте, что медиа запросы могут использоваться и в языках, отличных от CSS – скажем, в JavaScript, но мы будем работать исключительно со стилевыми таблицами. К тому же, невзирая на то, что правилом @media могут определяться разные типы устройств, мы ограничимся лишь типом screen, чтобы лишний раз не усложнять статью.

Простой пример

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

@media screen and (min-width: 768px) and (max-width: 979px) { ... }

• Запрос начинает с «@media».
• Далее определяется тип устройства, для которого будет применимо правило media. В нашем случае: screen. Таким образом, любое устройство, которое не отображает контент на экране, проигнорирует данное правило.
• Логическое ключевое слово and является связкой, которая указывает на условие.
• В данном случае мы видим два условия: (min-width: 768px) и (max-width: 979px). Они позволяют идентифицировать устройства, область просмотра которых составляет от 768 до 979 пикселей.
• Наконец, идут скобки { … }. Они будут содержать в себе стилевые правила, которые применяются в том случае, если выполнены условия, определенные медиа запросом.

В итоге, если посмотреть на целый запрос, то он утверждает, что устройство с областью просмотра от 768 до 979 пикселей, должно применить все стили, стоящие в фигурных скобках. Устройства с шириной экрана менее 768px или более 979px проигнорируют данный запрос. Любые устройства, которые не выводят контент на экране, также проигнорируют его (печатные устройства и проекторы, к примеру).

Добавление стилей, зависящих от устройств

Давайте теперь внимательно посмотрим, какие стили мы можем задавать в фигурных скобках. Эти фигурные скобки полностью идентичны тем, которые используются в CSS, таким образом все правила необходимо писать в аналогичным синтаксисе. Ниже приведен простой пример стилевой таблицы со стандартным значением полей для блока div, и чуть меньшим значением полей, которое используется только для экранных устройств с шириной области просмотра не более 767px.

/* Default styles */
 div#main { margin:40px; padding:20px; }

/* Phones to tablets 767px and below */
 @media screen and (max-width: 767px) {
  div#main { margin:20px; }
 }

Обратите внимание, что совершенно не обязательно в своих правилах задавать абсолютно все значения. Медиа запросы поддерживают каскадные принципы CSS. Это означает, что любое стандартное стилевое правило, которое явно не переопределено медиа запросом, будет применяться ко всем типам устройств, выступающих объектами для определенных медиа запросов. В примере выше отступы не были явно определены в медиа запросе. Типы устройств, выступающие объектами для данного запроса, будут наследовать значение отступов, определенное в стилях по умолчанию.

В примере выше мы использовали логическую связку and. Существует три других логических элемента, которые также могут использоваться в медиа запросах.

• Запятая определяет логическое ИЛИ (OR)
• Ключевое слово not используется для инвертирования результатов запроса;
• Ключевое слово only может оказаться полезным для скрытия материала от старых браузеров.

Адаптация дизайна ко всем размерам экрана

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

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

/* Default styles */
 div#main { margin:40px; padding:20px; }

/* Large display 1200px and above */
 @media screen and (min-width: 1200px) {
  div#main { margin:50px; }
 }

/* Portrait tablets 768px and above */
 @media screen and (min-width: 768px) and (max-width: 979px) {
  div#main { margin:30px; }
 }

/* Phones to tablets 767px and below */
 @media screen and (max-width: 767px) {
  div#main { margin:20px; }
 }

/* Phones 480px and below */
 @media screen and (max-width: 480px) {
  div#main { margin:10px; }
 }

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

Если у вас есть относительно простая тема с простым дизайном (скажем, Twenty Twelve), вы можете добавить все медиа запросы в одну таблицу стилей. Однако очень часто бывает так, что медиа запросы под каждое устройство растягиваются на несколько тысяч строк. Как поступить в таком случае?

Использование нескольких стилевых таблиц

Медиа запросы могут использоваться для задания отдельных стилевых таблиц, которые будут применяться только для определенных медиа типов и/или условий. Таким образом, вы будете иметь одну стилевую таблицу для своих стилей по умолчанию, и другую таблицу для вашего адаптивного представления. Если у вас уже есть две стилевые таблицы, вы можете вызвать их двумя способами (использовать лучше только какой-либо один из них, но никак не оба сразу).

Вы можете вызвать адаптивную таблицу стилей из своей стандартной таблицы стилей с помощью правила @import. Для этого вам придется добавить к медиа-запросу некоторые условия, которые затем будут проверяться в правиле @import. Таким образом, вместо следующей конструкции (которая загружала бы адаптивную стилевую таблицу для всех устройств):

@import url(responsive.css);

…вы можете использовать конструкцию (которая будет загружать стилевую таблицу только в том случае, если верно какое-либо из двух условий):

@import url(responsive.css) screen and (max-width: 979px), screen and (min-width: 1200px) ;

Второй пример демонстрирует использование запятой в качестве логического ИЛИ. Адаптивная стилевая таблица будет загружаться только для устройств с шириной экрана менее 980 пикселей или более 1200 пикселей.

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

Загрузите свои стилевые таблицы в файле header.php своей темы через тег link. Вы, скорее всего, видели, как это делается:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); >" />

Вы можете устанавливать загрузку различных стилевых таблиц через различные условия, используя медиа запросы прямо в ссылке. Вот как это выглядело бы на практике для предыдущего примера с правилом @import (мы предполагаем, что адаптивная стилевая таблица находится в корневой папке темы):

<link rel="stylesheet" type="text/css" media="screen and (max-width: 979px), screen and (min-width: 1200px)" href="><?php echo get_template_directory_uri(); ?>/responsive.css">

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