Новости из Блогов Разработка адаптивного дизайна с помощью jQuery Mobile и CSS3

Разработка адаптивного дизайна с помощью jQuery Mobile и CSS3
Создание макетов Web-страниц, учитывающих разрешение экрана мобильных устройств

Дата: 25.09.2012
Крис Хэдлок, Web-разработчик/дизайнер, Studio Sedition
http://www.ibm.com/developerworks/ru/library/mo-jquery-responsive-design/
Описание: Библиотека jQuery Mobile сама по себе является отличным решением для быстрого создания удобных для доступа мобильных Web-сайтов на основе HTML5. При совместном использовании с CSS3 ситуация становится еще интереснее, поскольку появляется возможность создавать макеты Web-страниц, учитывающие разрешение экрана устройства, на котором они просматриваются. Из этой статьи вы узнаете о том, как использовать библиотеку jQuery Mobile и технологию CSS3 Media Queries для разработки адаптивного дизайна Web-страниц.


Query Mobile – это библиотека JavaScript, с помощью которой легко можно создавать мобильные версии Web-сайтов, а также конвертировать существующие Web-страницы в удобные для навигации с сенсорных устройств Web-сайты и приложения. Вполне возможно, что библиотека jQuery Mobile изменит способ взаимодействия пользователей мобильных и планшетных устройств с приложениями, позволив напрямую подключаться к приложениям с поддержкой сенсорного управления через Web-браузер. Существуют различные возможности, которые можно использовать для Web-разработки, однако подход с использованием библиотеки jQuery Mobile отличается тем, что ее можно использовать для самых различных мобильных платформ.

Мобильные и планшетные устройства распространяются с неимоверной скоростью, а библиотека jQuery Mobile позволяет разработчикам идти в ногу с постоянно растущими требованиями к разработке Web-решений. Внедрение новых возможностей в Web-разработки требует наличия новых знаний и опыта у разработчиков и дизайнеров. По прогнозам Web-сайта Nielsen, предполагалось, что в 2011 году каждый второй американец будет являться обладателем смартфона (ссылка на этот блог приведена в разделе Ресурсы); эта цифра существенно отличается от показателей 2008 года, где доля обладателей смартфонов составляла всего 10% от общего числа пользователей мобильных телефонов; согласно прогнозам AMI-Partners, "количество планшетных устройств, используемых в фирмах с численностью от 1 до 1000 сотрудников, вырастет к 2015 году на 1000%" (ссылка на полный прогноз приведена в разделе Ресурсы). С учетом таких темпов роста возникает острая потребность в Web-разработчиках и дизайнерах, которые могут создавать современные мобильные Web-решения. Библиотека jQuery Mobile является отличным средством для разработки мобильных Web-приложений, поскольку позволяет сократить время разработки и поддерживает самые различные мобильные платформы.

Некоторые трудности и способы их решения

Библиотека jQuery Mobile является отличным инструментом для создания мобильных и планшетных версий Web-страниц, но она всецело полагается на содержимое Web-сайта, которое должно добавляться в определенных data-role атрибутах. В редких случаях может оказаться невозможным добавить эти атрибуты в HTML-разметку, из-за чего потребуется создать для мобильного устройства отдельный Web-сайт. Несмотря на это, в данной статье будет показано, как путем несложных усилий можно разработать адаптивный дизайн и определить поведение макета Web-страницы при просмотре на различных мобильных устройствах, используя jQuery Mobile и технологию Cascading Style Sheets version 3 (CSS3) Media Queries. В этой статье мы создадим простой Web-сайт, который будет динамически выбирать для отображения соответствующий макет страницы с учетом разрешения экрана мобильного устройства.

Адаптивным называют дизайн, который может учитывать разрешение экрана устройства, используемого для просмотра Web-страницы. Это означает, что вне зависимости от того, просматривается ли Web-страница на мобильном телефоне, планшетном компьютере или обычной рабочей станции, пользователь будет видеть тот макет страницы, который соответствует разрешению экрана устройства. Хотя библиотека jQuery Mobile позволяет быстро и легко создавать мобильные версии Web-сайтов, на текущий момент она не содержит внутренних методов динамического определения разрешения экрана устройства (и скорее всего эта функция не будет реализована никогда). Фактически на Web-сайте проекта jQuery Mobile сказано, что существующая ранее функциональность Media Query Helper Classes не была рекомендована к использованию в бета-версии, а в финальной версии была полностью удалена. Вместо этой функциональности разработчики jQuery Mobile рекомендуют использовать CSS3 Media Queries. Использование jQuery Mobile совместно с CSS3 Media Queries позволяет разработать адаптивный дизайн, который подходит для мобильных, планшетных и настольных устройств. Именно комбинация jQuery Mobile и CSS3 Media Queries используется для разработки адаптивного дизайна документации к самому продукту. Документация jQuery Mobile по своим средствам адаптации к разрешению экрана очень похожа на пример, рассматриваемый в этой статье.

Начиная с версии 2.1 в CSS реализованы методы кодирования, основанные на использовании медиа типов устройств (Media Types). Наиболее распространенный способ использования Media Types заключается в создании отдельной таблицы стилей для Web-страницы, отображаемой на экране настольного компьютера, и отдельной таблицы стилей для версии Web-страницы, выводимой на печать. В CSS3 эта концепция была усовершенствована, результатом чего стала технология Media Queries. Media Queries позволяет разработчикам определять тип и физические параметры устройства, на котором просматривается Web-страница. Излишне говорить о том, что технология Media Queries быстро набрала популярность и стала широко использоваться для выбора определенной таблицы стилей на основе разрешения экрана устройства. В листинге 1 приведен пример использования Media Queries, в котором выбирается таблица стилей, назначенная мобильным и планшетным устройствам.

Листинг 1. Использование Media Queries для выбора таблицы стилей, назначенной определенным устройствам

Code:

<link 
  rel="stylesheet" 
  type="text/css" 
  media="screen and (max-device-width: 799px)" 
  href="mobile-tablet.css" />

В этом примере атрибут media содержит медиа-тип, равный screen, и запрос Media Query (заключен в скобки), который проверяет, не превышает ли ширина экрана устройства 799 пикселов. Если это условие выполняется, то используется таблица стилей для мобильных/планшетных устройств, в противном случае таблица стилей не используется. Чтобы обеспечить отображение страницы на экранах с различным разрешением, можно использовать на одной Web-странице несколько ссылок на таблицы стилей, указав в каждой из них собственный запрос Media Query. Как я упоминал, обычно создается три таблицы стилей: одна для мобильных и планшетных устройств, одна для мониторов персональных компьютеров с низким разрешением и одна – для мониторов с высоким разрешением. Если бы вы использовали код из листинга 1, то эту таблицу стилей использовали бы все устройства с разрешением экрана меньше 799 пикселов, так что это превосходный пример того, как можно определить отдельную таблицу стилей для мобильных и планшетных устройств и отдельную таблицу стилей для персональных компьютеров.

Можно также использовать несколько запросов Media Query непосредственно внутри CSS одной страницы стилей. В листинге 2 приведен пример класса CSS, используемого для настройки панелей навигации, которые мы создадим чуть позже. Если ширина экрана устройства не меньше 800 пикселов, ширина панели навигации устанавливается равной 300 пикселам; если ширина экрана устройства не превышает 799 пикселов, ширина панели навигации устанавливается в 100%.

Листинг 2. Использование Media Queries для выбора CSS, назначенного устройству

Code:

@media all and (min-width: 800px) {
  #nav {
    width: 300px;
  }
}

@media all and (max-width: 799px) {
  #nav {
    width: 100%;
  }
}

Другое замечательное свойство Media Queries заключается в том, что если вы будете просматривать в современном Web-браузере страницу, которая содержит код CSS из листинга 2, связанный с HTML-элементом, то эта страница также будет реагировать на размер окна браузера. Таким образом, если ширина окна браузера не будет превышать 799 пикселов, то ширина панелей навигации будет равна 100%; если же ширина окна браузера будет равна 800 пикселам или больше, то ширина панелей навигации будет равна 300 пикселам.

Добавляем адаптивность

Media Queries – это разновидность условного оператора, определяющая, какая CSS будет применяться к Web-странице. Используя Media Queries в связке с библиотекой jQuery Mobile, можно создавать мощные мобильные Web-сайты, одновременно поддерживающие отдельные макеты Web-страниц для настольных систем. Сама по себе библиотека jQuery Mobile позволяет легко и быстро создавать дружелюбные Web-сайты с поддержкой сенсорных экранов. Эта библиотека содержит множество компонентов, упрощающих добавление кнопок, панелей инструментов, диалоговых окон, списков и т. д. Однако, когда дело доходит до работы с макетом страницы, вам не обойтись без CSS. К счастью, как уже упоминалось в этой статье, в CSS3 была представлена технология Media Queries, позволяющая разработчикам динамически изменять макет Web-страницы в зависимости от разрешения экрана устройства, на котором она просматривается.

В связке с библиотекой jQuery Mobile технология Media Queries позволяет создавать адаптивные макеты страниц. В этой статье мы рассмотрим простой пример, включающий в себя набор панелей навигации и таблицу. Эти элементы будут располагаться на странице по-разному в зависимости от разрешения экрана. Для того, чтобы библиотека jQuery Mobile заработала на вашей Web-странице, сначала необходимо вставить ссылки на связанные с ней файлы JavaScript и CSS, как показано в листинге 3.

Листинг 3. Вставка ссылок на файлы библиотеки jQuery Mobile

Code:

<link rel="stylesheet" 
  href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>

В состав jQuery Mobile входит компонент listview, который используется для отображения панелей навигации. Для создания представления в виде списка просто добавьте в элемент ul списка навигации атрибут data-role со значением listview. jQuery Mobile также содержит различные инструменты для создания таблиц из нескольких столбцов. В листинге 4 я создал таблицу, состоящую из двух строк и трех столбцов, используя для этого комбинацию классов ui-grid-b, ui-block-a и ui-bar. За дополнительной информацией о доступных компонентах библиотеки jQuery Mobile обратитесь к разделу Ресурсы.

Листинг 4. Добавление представления в виде списка и таблицы в область содержимого

Code:

<div data-role="content">
    <ul id="nav" data-role="listview" data-inset="true">
        <li><a href="#">Nav item</a></li>
        <li><a href="#">Nav item</a></li>
        <li><a href="#">Nav item</a></li>
    </ul>
    
    <div id="grid" class="ui-grid-b">
        <div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
        <div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
        <div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
        <div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
        <div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
        <div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
    </div>
</div>

В конце имен некоторых классов добавлены буквы, которые связаны со стилями – на их основании jQuery Mobile определяет, какой стиль будет использоваться при отображении компонента. За дополнительной информацией по работе со стилями jQuery Mobile обратитесь к разделу Ресурсы.

Теперь, когда у нас есть готовая Web-страница, можно приступать к созданию адаптивного макета с помощью CSS3, который будет динамически изменяться при использовании экранов с различными разрешениями. Сделать это просто: используйте уже известную вам технологию Media Queries для определения разрешения экрана, а затем создайте CSS для всех различных вариантов. В листинге 5 используются два запроса Media Queries: первый проверяет условие, при котором разрешение экрана больше или равно 800 пикселам, а второй – условие, при котором разрешение экрана не превышает 799 пикселов. В первом случае панели навигации и таблица выравниваются по левому краю, располагаясь друг рядом с другом и заполняя все пространство, доступное на экране с более высоким разрешением. Во втором случае выравнивания не происходит, ширина элементов устанавливается равной 100%, а таблица располагается под панелями навигации – такой макет лучше подходит для экранов с небольшим разрешением, например, для смартфонов и планшетных компьютеров.

Листинг 5. Использование Media Queries для создания адаптивного макета страницы

Code:

@media all and (min-width: 800px) {
  #nav {
    width: 300px;
    float: left;
    margin-right: 20px;
  }
  #grid {
    width: 450px;
    float: left;
  }
}

@media all and (max-width: 799px) {
  #nav {
    width: 100%;
  }
  #grid {
    width: 100%;
  }
}

На устройствах с более высоким разрешением экрана страница будет выглядеть так, как показано на рисунке 1.

Рисунок 1. Отображение Web-страницы на экране с более высоким разрешением


На устройствах с более низким разрешением экрана страница будет выглядеть так, как показано на рисунке 2.

Рисунок 2. Отображение Web-страницы на экране с более низким разрешением


Конечно, мы рассмотрели очень простой пример, но тем не менее он показывает, насколько просто создать адаптивный макет страницы с помощью jQuery Mobile и CSS3. Эти технологии обладают невероятными возможностями и являются лишь отправной точкой в ваших начинаниях. Добавляя простые data-role атрибуты в HTML-код, можно создавать мобильные версии Web-страниц, а с помощью CSS3 Media Queries можно разрабатывать дизайн страниц, который адаптируется под устройства с различными разрешениями экранов. Если Web-страницы просматриваются на обычном стационарном компьютере, можно даже изменить стиль jQuery Mobile, чтобы они выглядели не так, как на мобильном устройстве. Все, что для этого требуется – это проверить разрешение экрана с помощью Media Query и изменить CSS для соответствующих компонентов jQuery Mobile, чтобы полностью переопределить стили темы по умолчанию.

Заключение

Адаптивный дизайн нужен для того, чтобы ваши данные отображались на Web-страницах наилучшим образом. Совместное использование библиотеки jQuery Mobile и CSS3 позволяет создавать многочисленные наборы макетов, которые можно использовать на различных устройствах.

Загрузка

Пример для этой статьи jquery-mobile-responsive-design.zip 3 КБ HTTP