«Мобильный сначала!» это новый крик веб-дизайнеров по всему миру. Но как ты это делаешь? Вы должны отказаться от всех своих текущих веб-навыков? Это магия, созданная подобными волшебникам дизайнерами, которую никогда не могли понять простые смертные? Хотите верьте, хотите нет, но с помощью jQuery Mobile и CSS3 Media Queries вы можете легко создать сайт, который будет хорошо смотреться на телефоне, планшете или компьютере.
Основные отзывчивые веб-функции
Сеть началась как отзывчивая. По общему признанию, сеть делала не очень много, поэтому легко реагировать, когда в Интернете преобладали документы. HTML документы естественным образом переносятся на следующую строку и стекаются вниз по странице.
По пути все изменилось. Разработчики начали создавать сайты с помощью таких инструментов, как PhotoShop, и хотели, чтобы пиксели идеально отображали эти проекты. Проблема с пикселями в том, что они не очень гибкие. Всегда можно было использовать проценты вместо пикселей, но с ними было неудобнее работать, поэтому пиксели оставались любимыми.
В HTML5 и CSS3 больше поддержки адаптивного дизайна. Давайте
Мета-теги
Мета-теги были фаворитом толпы SEO в течение некоторого времени. Мета-теги используются для определения ключевых слов, описаний и даже перенаправлений. Вот несколько правил о метатегах:
-
Они всегда идут в разделе <head> страницы
-
Они никогда не отображаются
-
Они состоят в основном из пар ключ / значение: имя = ключ и контент = значение
Viewport
Окно просмотра — это специальный тип метатега, который определяет экран мобильного устройства. В примере программы метатег viewport выглядит так:
<meta name = «viewport» content = «ширина = ширина устройства, начальный масштаб = 1, максимальный масштаб = 1, масштабируемый пользователем = нет» />
Приведенные выше атрибуты означают:
-
width = device-width — преобразует пиксели в пиксели CSS
-
начальная шкала = 1 — устанавливает уровень шкалы
-
user-scalable = no — отключает масштабирование
Если начальное масштабирование имеет другое значение, отличное от 1, масштаб может быть меньше или больше. Если для масштабируемого пользователем установлено значение «да», то пользователь устанавливает уровень масштабирования, касаясь, сжимая или любым другим жестом масштабирования, поддерживаемым браузером.
Медиа-запрос
Медиа-запросы — рабочая лошадка адаптивного дизайна. Медиа-запрос — это медиа-тип и, по крайней мере, одно выражение, которое ограничивает область применения таблиц стилей. Вот пример:
@media screen and (max-width: 1024px) and (orientation:portrait)
{
}
Приведенный выше медиа-запрос означает:
-
Для типа носителя экрана
-
Определите классы, только если
-
Ширина меньше 1023
-
И ориентация портретная
Медиа-запрос начинается с @media, а затем медиа-типа, в данном случае, экрана. Другие типы: все, шрифт Брайля, с тиснением, ручной, печать, проект, речь, tty и телевидение. Вы можете составлять сложные медиа-запросы, используя логические операторы вроде not, and и only.
-
not — используется для отмены целого медиазапроса
-
и — используется для объединения нескольких медиа-функций в один медиа-запрос
-
only — используется для применения стиля, только если весь запрос соответствует
Наконец, есть список через запятую, который ведет себя как оператор или. Если какие-либо медиа-запросы возвращают true, таблицы стилей применяются.
Один из способов применения медиазапросов — сначала определить запрос для самого узкого устройства, затем определить для планшета и, наконец, для рабочего стола. Теперь все эти определения довольно свободны и открыты для интерпретации. Возможно, вам придется настроить их в соответствии с вашими потребностями.
Если вы запускаете демонстрацию на телефоне с высоким разрешением, например Nexus 4, который имеет разрешение экрана 1280×768, почему он не отображается как рабочий стол? Ключ — метатег области просмотра. Этот тег, который читается мобильными браузерами, переопределяет пиксели как пиксели CSS. Точное количество пикселей CSS варьируется в зависимости от устройства, но на iPhone это 320, а на Nexus 4 это 384, оба из которых меньше, чем минимум 480 пикселей, которые можно определить как планшет.
Мобильные функции jQuery
До сих пор мы не рассматривали возможности jQuery Mobile. С самого начала jQuery Mobile обладает адаптивными функциями. Некоторые из которых:
-
Сетка — простой способ создания колонок на основе CSS, который также может быть адаптивным
-
таблицы — выборочно скрывает или показывает столбцы таблицы в зависимости от ширины экрана
-
панели — создает скрытую страницу, которая скользит влево или вправо, чтобы показать себя
Сетки
С самого начала сетки были с jQuery Mobile. По сути, это столбцы с саморазмерными размерами, которые динамически изменяют размер самих себя при изменении размера страницы. Количество доступных столбцов колеблется от двух до пяти. Чтобы изменить количество доступных столбцов, просто измените класс в корне p, затем добавьте или удалите ap из коллекции.
-
ui-grid-a = 2 столбца
-
ui-grid-b = 3 столбца
-
ui-grid-c = 4 столбца
-
ui-grid-d = 5 столбцов
таблицы
Таблицы были добавлены с выпуском jQuery Mobile 1.3.0. Они позволяют оперативно отображать табличные данные. Существует два основных типа таблиц: перекомпоновка по умолчанию и переключение столбцов. Таблицы перекомпоновки располагают данные таблицы горизонтально, пока она не достигнет минимального размера, затем все данные для каждой строки сгруппируются, и они перетекут вниз по странице.
В режиме переключения столбцов каждому столбцу таблицы может быть присвоен отдельный приоритет, когда данные больше не могут соответствовать горизонтали, столбец с наименьшим номером приоритета, который все еще виден, скрыт. Это продолжается до тех пор, пока не будет достигнут минимальный размер или пока не останется только один столбец.
Панели
Панель — это скрытая страница, которая раскрывается, скользя слева или справа на страницу. На нем может поддерживать практически любой виджет jQuery Mobile. Когда панель отобразится, щелкните в любом месте на странице, чтобы закрыть ее.
Лучшие практики
-
Стили дизайна начинаются с «сначала мобильного», а затем расширяются
-
Используйте «минимальную ширину», чтобы ограничить стили
-
Предпочитаю проценты и ems в пикселях