► Для тестирования адаптивной верстки лучше всего использовать различные мобильные устройства (планшетные ПК, коммуникаторы), но если они недоступны, можно воспользоваться плагинами для браузеров.
- Internet Explorer — Microsoft Internet Explorer Developer Toolbar (встроен в браузер, начиная с версии 8)
- Firefox — Firesizer
- Google Chrome — Windows Resizer
- Safari — ResizeMe
При использовании этих инструментов нужно учитывать один важный момент: они показывают размер всего окна браузера, а не области просмотра.
► Как известно, важную роль при создании адаптивной верстки сайтов играют media queries (медиа запросы). Нужно помнить, что блоки с media queries в файле стилей помещают после всех основных CSS-правил.
► Следующий важный момент: чтобы браузеры мобильных устройств (Android и iOS) не сжимали веб-страницу под размер экрана, нужно использовать специальный meta-тег.
HTML
{code class="brush: html; gutter: false;"}
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
{/code}► В процессе верстки, нужно стараться, чтобы блок с основным содержимым страницы располагался в коде как можно выше. Например, у нас есть блок с контентом и блок с второстепенным содержимым (например, врезкой), который в макете должен располагаться слева от содержимого. В этом случае будет правильным в коде страницы сначала разместить блок с контентом, а затем врезку. Благодаря CSS-правилу float, блоки останутся на своих местах, как задумано в макете.
► Медиа-запросы – это мощный инструмент, применяемый в адаптивной верстке сайтов. Однако, используя только его, создать настоящий отзывчивый сайт не получится. Адаптивный сайт должен быть создан на основе «резинового» макета, в котором ширина блоков указывается в %, а размер шрифта в em.
В таблице приведены примеры медиа-запросов для разных разрешений экранов мобильных устройств. Данные по разрешениям взяты из статистики за 2013 год.
| Разрешение экрана (px) | Медиа-запрос |
|---|---|
| 320×240 | @media screen and (max-width: 352px){ … } |
| 352×240 | |
| 352×288 | |
| 400×240 | @media screen and (max-width: 480px){ … } |
| 480×576 | |
| 640×240 | @media screen and (max-width: 720px){ … } |
| 640×360 | |
| 640×480 | |
| 720×1280 | |
| 800×480 | @media screen and (max-width: 860px){ … } |
| 800×600 | |
| 854×480 |
На устройствах с бо́льшими разрешениями будет показана обычная версия сайта без визуальных преобразований. Однако, нужно учитывать при этом и максимальную ширину макета, чтобы сайт «прилично» смотрелся на широких мониторах - об этом читайте ниже.
► Для преобразования пиксельных значений ширины фиксированных макетов в процентные применяется формула: ширина целевого элемента(px) / ширину контекста(px) = ширина %
► Значения ширины, полученные при вычислении по этой формуле, используются в CSS-правилах без округления. Например, у нас есть блок-контейнер (ширина - 960px) и в нем блок с навигацией (ширина - 200px): 200px/960px = 0,2083333333333333 (передвигаем запятую на 2 символа вправо) = 20.8333333 %
► Размер шрифта в адаптивных макетах указывается в em. Предварительно размер шрифта у всех элементов приводится к одному размеру. Этот размер по-умолчанию у всех браузеров равен 16px.
CSS
{code class="brush: css; gutter: false;"}
*{
font-size: 100%;
}
{/code}► В процессе верстки адаптивного макета используются «резиновые» изображения. Такие изображения могут масштабироваться пропорционально макету.
CSS
{code class="brush: css; gutter: false;"}
img{
max-width: 100%; /* работает в современных браузерах и IE начиная с 7 версии */
}
{/code}При этом не нужно указывать значения ширины и высоты изображения в атрибутах тега <img />. Однако, чтобы изображения не увеличивались больше своего физического размера, нужно применить к ним следующее правила:
CSS
{code class="brush: css; gutter: false;"}
img.someImg{
width: 35.7142857%; /* изображение - 250px / контейнер - 700px */
max-width: 250px;
}
{/code}При использовании этого правила изображение не увеличиться при масштабировании больше своего физического размера.
► В идеале при разных размерах экрана должны загружаться разные по размеру изображения. Это необходимые меры для оптимизации времени загрузки страницы и объема трафика у посетителей, использующих мобильные устройства. Существует инструмент под названием Adaptive Images, который генерирует уменьшенные изображения на стороне сервера. Оно не требует внесения изменений в разметку страницы. Для корректной работы этого инструмента требуется провести небольшие настройки в .htaccess и добавить на страницы с изображениями javaScript-код. При загрузке Adaptive Images в архиве имеется файл-инструкция по настройке.
► При создании адаптивной верстки, необходимо принимать в расчет области просмотра на экранах с высоким разрешением, таких как у современных устройств компании Apple. Например, у iPhone4 разрешение составляет 326 ppi. Для качественного отображения сайта на экранах таких устройств нужно создавать альтернативные изображения с хорошим разрешением и подключать их используя специальный медиа-запрос.
CSS
{code class="brush: css; gutter: false;"}
@media all and (-webkit-min-device-pixel-ratio : 1.5) {
#wrap header .logo{
background-image: url("path/to/better_image.png");
}
#wrap header .logo:hover {
background-image: url("path/to/better_image_hover.png");
}
}
{/code}Примерно так мы можем показать более «качественный» логотип владельцам устройств с экранами высокого разрешения, которые посетят наш сайт.
► Чтобы шаблон сайта «не разъезжался» на широких мониторах больше определенной ширины также нужно использовать CSS-правило max-width, применив его к контейнеру.
CSS
{code class="brush: css; gutter: false;"}
#wrap{
width:96%;
margin: 0 auto;
max-width: 1280px;
min-height: 100%;
}
{/code}