Разработка адаптивного веб-сайта: структура шаблона и media queries
Давайте рассмотрим 3 разных структуры шаблона
Традиционный резиновый шаблон
Резиновый шаблон основывается на системе относительных элементов, вместо абсолютных пиксельных значений. Такой тип шаблона уже довольно давно используется дизайнерами.
Идея крайне проста: вместо того, чтобы указывать ширину элементов в пикселях, мы задаем значение в процентном соотношении. Веб-сайты, основанные на резиновых шаблонах, обычно занимают всю ширину окна браузера, конечно же, если в качестве значения ширины используется показатель в 100%.
Давайте рассмотрим резиновый шаблон на примере.
Файл style.css предоставляет нам общие стили страницы (цвета, шрифты), но давайте рассмотрим файл fluid.CSS:
#header { width: 100%; margin: 0; padding: 0; } #content { float: left; width: 60%; margin: 0 0 20px 0; padding: 0; } #content .inner { margin-right: 2%; } .sidebar{ float: left; margin: 0 0 20px 1%; padding: 0; } #bar1{ width:20%; } #bar2{ width:18%; } #footer { clear: both; width: 100%; margin: 0; padding: 0; }Наши шапка и подвал сайта имеют значение ширины равное 100%, следовательно, они будут занимать все доступное пространство. Область основного контента будет занимать 60% пространства, а боковые панели – 20 и 18 процентов соответственно. Таким образом, у нас будет возможность создать дизайн, который будет подходить к экранам любой ширины.
Такой дизайн будет адаптироваться к большим экранам, но здесь мы столкнемся с тем, что содержимое боковых панелей будет очень сложно воспринимать, если окно браузера сильно уменьшить.
Адаптивный шаблон
Адаптивный шаблон основывается на очень простой идее: вместо использования процентного соотношения в качестве значения ширины, мы будем использовать фиксированные значения, которые будут меняться в зависимости от ширины экрана устройства. Другими словами, структура шаблона будет содержать в некотором роде «изгибы», на профессиональном жаргоне называемые «breakpoint».
На каждом таком «изгибе» мы будем применять media queries (во второй части данной статьи мы расскажем вам о них подробнее) для адаптации шаблона нашего сайта.
Давайте ознакомимся с адаптивным шаблоном.
HTML-код и style.css не изменяются. Мы изменяем лишь структуру страницы. Давайте подробнее рассмотрим наш CSS-файл.
«Традиционные» веб-сайты используют подобный CSS-файл:
body{ width:1280px; margin:0 auto; } #header { width: 100%; margin: 0; padding: 0; } #content { float: left; width: 800px; margin: 0 0 20px 0; padding: 0; } #content .bloc{ margin-right: 10px; } .sidebar{ float: left; margin: 0 0 20px 20px; padding: 0; width:220px; } #footer { clear: both; width: 100%; margin: 0; padding: 0; }Подвалу и шапке сайта мы задали ширину равную 100%, но у области контента ширина будет фиксированной. Теперь приступаем к самому интересному – изгибам и media queries:
/* Media queries */ @media screen and (max-width: 1200px) { body{ width:1000px; margin:0 auto; } #content { width: 700px; } .sidebar{ width:280px; } } @media screen and (max-width: 980px) { body{ width:850px; margin:0 auto; } #content { width: 550px; } .sidebar{ width:280px; } } @media screen and (max-width: 750px) { body{ width:600px; margin:0 auto; } #content { width: 400px; } .sidebar{ width:190px; margin: 0 0 20px 10px; } } @media screen and (max-width: 540px) { body{ width:450px; margin:0 auto; } #content { width: 450px; } #content .bloc{ margin:0px; } .sidebar{ width:450px; margin: 0 0 10px 0; } } @media screen and (max-width: 380px) { body{ width:360px; margin:0 auto; } #content { width: 360px; } #content .bloc { margin:0px; } .sidebar{ width:360px; margin: 0 0 10px 0; } }В каждом breakpoint’е, заданным посредством media query, мы изменяем размер тела, контента и боковой панели. При разрешении в 540 пикселей, текст в боковой панели становился нечитаемым, поэтому мы делаем размер текста таким же, как и у шрифта для контента, и далее боковые панели смещаются под область контента.
В адаптивном шаблоне хорошо то, что есть возможность изменить и адаптировать не только размеры блоков, но и саму структуру шаблона.
Самое сложное заключается в выборе оптимальных точек изгиба. Первая техника заключается в определении наиболее распространенных разрешений экранов в устройствах. Крис Койер (Chris Coyier) из CSStricks составил отличный список media queries. Еще один метод заключается в тестировании дизайна на различных экранах и выяснить, когда дизайн становится нечитаемым.
Живой пример адаптивного шаблона:
Адаптивный/реагирующий шаблон
Данный тип мы можем определить как смесь резинового и адаптивного шаблонов. Здесь используются относительные единицы измерения их резинового шаблона, и точки изгиба (breakpoint) из адаптивного.
Здесь вы можете ознакомиться с живым примером реагирующего шаблона.
Здесь вы можете видеть, насколько дизайн гибок: посредством процентного соотношения мы имеем возможность создать очень плавный переход между различными точками изгибов.
Давайте рассмотрим «обычную» версию вашего CSS-файла:
#page{ max-width:1280px; } #header { width: 100%; margin: 0; padding: 0; } #content { float: left; width: 60%; margin: 0 0 20px 0; padding: 0; } #content .bloc { margin-right: 2%; } .sidebar{ float: left; margin: 0 0 20px 1%; padding: 0; } #bar1{ width:20%; } #bar2{ width:18%; } #footer { clear: both; width: 100%; margin: 0; padding: 0; }Здесь важно использование параметра max-width (вместо width, как мы наблюдаем это в случае с адаптивным шаблоном). Именно этот параметр позволяет нам создать плавный переход. За счет использования параметра max-width нам не придется использовать столько точек изгиба, как это необходимо в случае с адаптивным шаблоном, а все остальные размеры можно будет указать в относительной единице измерения (процентное соотношение, например).
Давайте рассмотрим CSS для media queries:
/* The media queries*/ @media screen and (max-width: 1000px) { #bar1, #bar2{ width:39%; } .sidebar{ float: left; margin: 0 0 20px 1%; padding: 0; } } @media screen and (max-width: 540px) { #bar1, #bar2{ clear:both; width:100%; } .sidebar{ float: left; margin: 0 0 20px 1%; padding: 0; } #content { clear:both; width:100%; } #content .bloc { margin:0; } }Все другие размеры будут указаны в процентном соотношении, относительно параметра max-width, заданного к телу нашего шаблона.
Учтите, что для размера экрана, когда разрешение ниже 540 пикселей, мы снова задаем 100% ширины для боковых панелей и области для контента, и размещаем боковые панели под контентом при помощи clear: both.
Преимущество реагирующего шаблона заключается в том, что вам не придется использовать много breakpoint’ов. Так как размеры указаны в процентах, они будут автоматически адаптироваться, и основная задача точек изгиба будет заключаться в том, где именно нужно изменить структуру шаблона (перемещение боковых панелей под контент, к примеру), чтобы посетитель увидел страницу в более удобном виде.
Media Queries: создание и определение breakpoint’ов
Media Queries были представлены в спецификации CSS3. Вкратце, Media Queries позволяют веб-дизайнерам создавать условные таблицы стилей, основанные на ширине, высоте, цветах, а также на ориентации дисплея. Уже сейчас у нас есть огромный список Media Queries, который вы можете посмотреть на сайте W3C, но мы сегодня будем использовать лишь некоторые их них. Давайте ознакомимся со списком часто используемых Media Queries, и с их предназначением:
Применение Media Queries
min-width: … px – используется, когда ширина окна просмотра больше или равна параметру width
max-width: … px – используется, когда ширина окна просмотра меньше или равна параметру width
min-device-width: … px – используется, когда ширина устройства больше или равна параметру width
max-device-width: … px – используется, когда ширина устройства меньше или равна параметру width
orientation : portrait // orientation: landscape – ориентация экрана устройства
-webkit-min-device-pixel-ratio : 1.5 – используется для определения устройств с экранами повышенной четкости (на android или ios)
Что касается печатных таблиц стилей, Media Queries могут быть использованы как внешние, так и как внутренние таблицы стилей. Внешние стили гораздо легче поддерживать в порядке, они не скачиваются браузерами, которые не поддерживают их, но они используют дополнительный запрос HTTP. Внутренние стили, с другой стороны, не требуют дополнительного запроса, но вся таблица стилей скачивается браузерами даже в том случае, когда они не поддерживают Media Queries, и их бывает сложнее поддерживать в порядке. В каждом случае есть свои плюсы и минусы.
Вы уже встречались с внутренним синтаксисом в примере выше:
body { background: gray; } @media all and (max-width:500px) { body { background: blue; } }Давайте теперь рассмотрим пример внешнего синтаксиса:
<link rel="stylesheet" type="text/CSS" media="screen and (max-device-width: 480px) " href="mobile.CSS" />Некоторые «трюки», которые следовало бы знать о Media Queries
Каскад имеет значение
Да, именно так! Как и в любом отрывке кода CSS, каскадное расположение имеет значение.
Давайте посмотрим на следующий пример:
#container{ background:rgba(111, 78, 152, 0.9); /*violet */ color:rgb(1, 1, 1); @media all and (min-width:500px) { #container{ background: rgba(255, 0, 0, 0.9); /* red */ color: white; } } @media all and (min-width:700px) { #container{ background: rgba(0, 0, 255,0.9); /*blue */ font-family: serif; } }Посмотреть пример на jsfiddle.
Если ширина окна нашего браузера будет больше 500 пикселей, то цвет текста становится белым, а фон красным. Если мы увеличим экран до более чем 700 пикселей, фон станет синим, а цвет текста останется белым, так как он будет наследовать цвет media query min-width:500px, который был применен ранее.
Создание очереди из Media Queries
Давайте рассмотрим следующим пример:
#container{ background:rgba(111, 78, 152, 0.9); /*violet */ padding:10px 5px; color:rgb(1, 1, 1); } @media all and (min-width:500px) and (max-width:699px) { #container{ background: rgba(255, 0, 0, 0.9); /* rouge */ font-family: serif; } } @media all and (min-width:700px) { #container{ background: rgba(0, 0, 255,0.9); /*bleu */ color: white; font-family: serif; } }А также ознакомьтесь с примером на jsfiddle
Первый media query будет применен только для экранов с разрешениями между 500px и 699px, и второй для экранов больше 700 пикселей. В случае с очередностью Media Queries, так как параметр применяется только к конкретной ширине, параметры не наследуются. В нашем примере, если нам захочется применить шрифт с засечками также к шаблону больше 700 пикселей, нам придется повторить этот параметр.
Для того чтобы Media Query заработал, вам нужно будет указать мета-тэг для окна просмотра. Этот мета-тэг позволяет вам взять под контроль окно просмотра устройства. В целом, если не выставлены параметры окна просмотра, мобильное устройство попробует уместить всю страницу на экране, что приведет к тому, что веб-сайт будет отображен очень маленьким.
Мета-тэг для окна просмотра выглядит следующим образом:
<meta name="viewport" content="initial-scale=1, width=device-width">В общем, мы сообщаем устройству, что мы будем использовать ширину экрана устройства в качестве ширины нашей страницы, и страница не может быть увеличена или уменьшена при первой загрузке.
Дело не только в мобильных устройствах!
В наших примерах мы показали вам некоторые media queries, применяемые в оптимизации под мобильные устройства, планшеты и устройства с маленькими экранами. Но, дабы привлечь ваше внимание к данному факту, мы вынесли его в отдельный абзац. media queries применяются не только для оптимизации под мобильные устройства. С каждым днем мы видим все больше и больше мобильных устройств – в некоторых экран больше, в некоторых наоборот.
Сегодня мы имеем игровые консоли, с помощью которых можно выходить в интернет, уже даже некоторые телевизоры позволяют выйти в интернет, и некоторые продвинутые провайдеры предлагают нам отличное оснащение для реализации данных подключений. Возможно, завтра мы увидим веб-браузер, встроенный в холодильник, кто знает. Если мы будем использовать адаптивный дизайн для маленьких экранов, мы так же можем использовать их и для больших экранов.
Давайте запомним кое-что важное: адаптивный веб-дизайн помогает нам адаптировать сайт под экран браузера пользователя, под ориентацию этого экрана.
Заключение
Как вы видите, адаптивный веб-дизайн не так уж и сложно использовать, и он позволяет веб-дизайнерам создавать красивые шаблоны, которые способны подстраиваться под различные устройства и размеры экранов. Теперь ваш ход! Применяли ли вы когда-нибудь адаптивный дизайн? Если да, то в каких проектах? Можете ли вы посоветовать что-нибудь тем, кто собирается изучить данный сегмент разработки? По какой стратегии вы определяете breakpoint’ы? Пожалуйста, расскажите нам в комментариях.
