Создаём мобильную версию сайта, используя CSS3 медиа-запросы
CSS3 продолжает радовать и, одновременно, разочаровывать веб-дизайнеров и веб-разработчиков. Мы радуемся возможностям, которые открывает перед нами CSS3, и тому, сколько проблем можно будет решить, используя их. Разочарование заключается в том, что все эти возможности недоступны браузерам Internet Explorer 8 и ниже. В этой статье будет продемонстрирована техника, использующая функционал CSS3, который также не поддерживается в Internet Explorer 8. На самом деле это не имеет никакого значения, т.к. главной областью применения этой техники являются мобильные устройства, такие как Iphone и Android-смартфоны, у которых браузеры поддерживают большое количество свойств CSS3.
В этой статье я объясню, как, с помощью нескольких правил CSS, вы можете создать Iphone-версию вашего сайта. Мы взглянем на очень простой пример и, попутно, я буду объяснять, как написать и использовать таблицу стилей для мобильных устройств для существующего сайта.
Медиа-запросы
Если вы хоть раз создавали таблицу стилей для своего сайта, которая описывала бы, как веб-страница выглядит на бумаге после печати, то вам уже знакома идея создания конкретной, отдельной таблицы стилей, которая начинает действовать при наступлении определённых условий – в случае с таблицей стилей для печати, когда страница будет отправлена на печать. Такая функция была введена в CSS2 c помощью медиа-типов. Они позволяют указать браузеру тип устройства, на котором нужно отобразить сайт – принтер, экран монитора, планшет и т.д. К сожалению, эти типы не получили большого внимания и вы вряд ли встретите использование каких-либо типов, кроме как для печати @media print.
Медиа-запросы в CSS3 используют эту идею и расширяют её. Вместо того, чтобы определять тип устройства, они определяют его свойства и вы можете использовать медиа-запросы для проверки следующих параметров:
- высоту и ширину окна браузера
- высоту и ширину экрана устройства
- положение в пространства (вертикально или горизонтально)
- разрешение экрана
Если пользователь использует браузер, который поддерживает медиа-запросы, тогда мы можем написать CSS-стили для определённых ситуаций. Для примера мы можем определить, что пользователь использует смартфон и показать ему совершенно другой дизайн сайта.
Так выглядит сайт на экране монитора:
А так он выглядит на экране смартфона:
Как вы видите на примере выше, мобильная версия сайта не просто была уменьшена, чтобы соответствовать экрану на телефоне – её структура была полностью переработана и спроектирована заново, чтобы сайт легко воспринимался на маленьком экране устройства. Многие подумают, что это специальный макет для iPhone, но это не так. Сайт одинаково выглядит на Android-устройствах, iPhone и в телефонах с браузером Opera Mini. используя медиа-запросы мы определяем свойства устройств и отображаем специально написанные стили для них.
Использование медиа-запросов для создания таблиц стилей для телефонов
Для начала разберём очень простой пример – ниже представлен макет с двумя колонками.
Чтобы сделать его более удобным для чтения на iPhone, я решил сделать весь дизайн в одну колонку, также уменьшим область с картинкой и заголовком, чтобы читателям сайта не приходилось прокручивать её до основного текста.
Первый способ использовать медиа-запросы – это просто написать альтернативную секцию с правилами CSS в вашей таблице стилей. Итак, для определения маленьких экранов, мы используем следующий синтаксис:
@media only screen and (max-device-width: 480px) {
}Затем нам нужно написать необходимые стили CSS для устройств с маленьким экраном внутри фигурных скобок. Из за того, что наша таблица стилей каскадная, мы можем переписать ранее заданные стили для необходимых элементов. Это работает до тех пор, пока раздел с медиа-запросом для маленьких экранов идёт ниже обычных стилей. Итак, добавим следующие правила:
@media only screen and (max-device-width: 480px) {
div#wrapper {
width: 400px;
}
div#header {
background-image: url(media-queries-phone.jpg);
height: 93px;
position: relative;
}
div#header h1 {
font-size: 140%;
}
#content {
float: none;
width: 100%;
}
#navigation {
float:none;
width: auto;
}
}Мы используем альтернативное изображение меньшего размера и уменьшаем высоту заголовка, затем отменяем свойство float для контента и навигации, установив его в значение none. Это нужно чтобы блоки с контентом и навигации располагались в нормальном потоке – друг под другом. Следующий шаг – установка ширины для контента, равной родительского элемента, а ширины блока навигации установим в значение auto. Все эти правила вступят в силу только на маленьком экране.
Подключение отдельной таблицы стилей, используя медиа-запросы
Добавление медиа-запросов со стилями для мобильных устройств в основную таблицу стилей целесообразно, только есть вы хотите внести немного изменений. Если же таблица стилей содержит тонну строк правил для разных устройств или вы хотите полностью отделить стили для настольных компьютеров и мобилок, то вам целесообразней подключать свою таблицу стилей для каждого устройства.
Чтобы подключить отдельную таблицу стилей и, используя каскадность, переписать существующие стили, необходимо после подключения основного css-файла написать следующие строки:
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />
Модернизация существующего сайта
Пример выше очень простой, он призван продемонстрировать саму технику. Тем не менее, этот метод может быть легко применён к уже существующему сайту для создания его мобильной версии. В качестве эксперимента я взял собственный сайт и на его примере буду применять эту технику.
Макет для экрана монитора
На данный момент сайт имеет несколько колонок. Домашняя страница несколько отличается от остальных, но в целом они все построены на трёх колонках. Этому сайту уже несколько лет и, когда он создавался, никто не рассматривал медиа-запросы. Да и сами медиа-запросы были ещё на стадии разработки.
Подключаем новую таблицу стилей
Необходимо сделать несколько изменений, чтобы макет смотрелся круто на телефонах, поэтому мы подключаем отдельную таблицу стилей после основной, используя медиа-запросы, которая вступит в силу на экранах, ширина которых меньше 480px.
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="/assets/css/small-device.css" />
Для создания новой таблицы стилей, мы делаем копию основной и называем её small-device.css. Мы перезапишем некоторые правила, а всё лишнее удалим.
Сокращаем размер шапки
Первое, что нужно сделать, это уменьшить логотип чтобы он классно смотрелся на экране телефона. Так как логотип является фоновым изображением, мы просто заменим одно изображение на другое, меньшего размера.
body {
background-image: url(/img/small-bg.png);
}
#wrapper {
width: auto;
margin: auto;
text-align: left;
background-image: url(/img/small-logo.png);
background-position: left 5px;
background-repeat: no-repeat;
min-height: 400px;
}Изменяем макет
Следующим шагом мы изменяем макет, чтобы он был одну колонку. Колонки в текущем макете для настольных компьютеров являются плавающими, их позиции заданы свойством float. Всё, что нам нужно сделать, это отменить свойство float и вернуть нормальный поток блоков, друг под другом. Так же мы установим ширину блоков в 100% от родителя.
.article #aside {
float: none;
width: auto;
}Прибираемся
Настало время проверить наш макет в онлайн-эмуляторе и подкорректировать мелкие недочёты, чтобы всё смотрелось супер. Для облегчения этого процесса рекомендую использовать расширение firebug для Mozilla.
Тестируем на Iphone
Загрузив таблицу стилей на хостинг, мы обнаружим, что сайт отображается уменьшенным и приходиться его приближать. Решение было найдено на сайте разработчиков Safari – добавляем один дополнительный мета-тэг в блок <head>, который устанавливает область просмотра, равную ширине экрана:
<meta name="viewport" content="width=device-width" />
Вот теперь сайт отображается как надо!
Это был очень простой пример, который показал, как легко адаптировать сайт под мобильные устройства.
Источник
