Разработка адаптивного веб-сайта: фоновые изображения

Перед тем, как с головой уйти в процесс разработки HTML-кода, давайте сначала обработаем мета-тэг «viewport». Устройства Apple iPhone и iPod Touch запрограммированы на автоматическое масштабирование вебсайтов в iOS-версии браузера Safari.

Эта технология представляет возможность отобразить веб-сайт полностью на экране, но он будет в уменьшенном виде. Так как мы собираемся задействовать media queries специально для адаптации дизайна под экраны разных размеров, нам не нужно автоматическое масштабирование, предусмотренное в устройствах от Apple. Мета-тэг viewport также позволит вам выставить параметры относительно того, насколько сильно пользователь сможет увеличить или уменьшить ваш сайт. Но главное здесь заключается в возможности выставить исходный масштаб, в котором будет открыт сайт. Конкретно в нашем сегодняшнем руководстве мы рекомендуем вам отображать сайт вообще без масштабирования.

Начав работу с HTML, вы наверняка заметите, что документ состоит из вполне простых HTML5-элементов, за исключением мета-тэга viewport и нашего div’а с основным фоном.



Как только мы закончили работу над HTML, давайте создадим файл каскадных таблиц стилей (CSS). Рекомендуем вам пользоваться сбросом настроек CSS, чтобы исключить возникновение нежелательных полей, отступов или границ. Просто используйте этот отрывок кода в ваших CSS-файлах.



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



Также обратите внимание на то, что размер шрифта указан в единицах em, и это один из важнейших элементов при разработке адаптивного дизайна, так как размер данной единицы основывается на процентном соотношении. Если вы выставите размер шрифта в пиксельном измерении, то он не будет соответствовать остальному дизайну, если сайт будет уменьшен для корректного отображения на меньших экранах. Буквы либо займут весь экран, либо будут накладываться друг на друга, а это совсем некрасиво.

Мы также можем добавить стиль в наш класс .homeContent и в id #mainBG. Мы определили высоту страницы, выставили ширину на 100%, и центрировали контент в рамках класса .homeContent. ID #mainBG будет отвечать за фоновое изображение, которым в нашем примере является стоковая картинка, полученная у автора 123RF. Мы также выставили параметр background-size на cover, что растянет изображение на весь экран, и позволит нашему фоновому изображению сохранять правильные пропорции при отображении на экранах с большим разрешением. Размер нашего фонового изображения «big.jpg» оставляет 1920x1189.



Теперь, когда мы закончили с разработкой основы, давайте внедрим media queries. Первые два запроса будут относиться к планшетным ПК. Посредством этих запросов мы сможем загрузить фоновое изображение среднего размера, так как загрузка большого изображения может отнять как время, так и трафик, и если нам не нужно изображение, в размерах дважды превышающее размер экрана, то его можно и не загружать. Размер нашего фонового изображения «medium.jpg» составляет 1024х770 пикселей. Также мы должны расположить его таким образом, чтобы оно корректно отображалось на всех типах планшетов.



Последний запрос будет относиться к мобильным телефонам. Посредством данного запроса мы будет отображать наше фоновое изображение под названием «small.jpg», размеры которого составляют 767х475.



Предварительный просмотр проделанной работы в браузере. Откройте свой шедевр сначала на весь экран, а затем постепенно уменьшайте окно просмотра. Вы увидите, как изображение незамедлительно начинает изменяться в размерах. Попробуйте определить, в каком положении задействуются media queries и меняется размер изображения.