Полезные сведения об адаптивной верстке

Описание: Программирование в HTML
Модератор: Aleksandr

LILUS M
Автор темы, Старшина
Старшина
Аватара
LILUS M
Автор темы, Старшина
Старшина
Сообщения: 136
Зарегистрирован: 2 мая 2013
С нами: 10 лет 10 месяцев

#1 LILUS » 31 января 2014, 18:38

Sun, 22 Sep 2013 11:10:41 +0400

В последние годы при верстке макетов сайтов разработчикам нужно обращать внимание на огромное разнообразие размеров экрана устройств, которыми пользуются для просмотра веб-страниц, и учитывать этот момент при создании шаблонов сайтов. Как известно, макеты, подстраивающиеся под различные устройства, называются адаптивными. В последнее время их популярность растет, в связи с этим, предлагаю вашему вниманию небольшую заметку, содержащую полезные сведения об адаптивной верстке сайтов.



► Для тестирования адаптивной верстки лучше всего использовать различные мобильные устройства (планшетные ПК, коммуникаторы), но если они недоступны, можно воспользоваться плагинами для браузеров.



  • Internet Explorer — Microsoft Internet Explorer Developer Toolbar (встроен в браузер, начиная с версии 8)

  • FirefoxFiresizer

  • Google ChromeWindows Resizer

  • SafariResizeMe


При использовании этих инструментов нужно учитывать один важный момент: они показывают размер всего окна браузера, а не области просмотра.


► Как известно, важную роль при создании адаптивной верстки сайтов играют 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}


Вернуться в «HTML»

Кто сейчас на форуме (по активности за 5 минут)

Сейчас этот раздел просматривают: 5 гостей