—»     —»   Разработка адаптивного веб-сайта: фоновые изображения
  Раздел: Руководства   Комментариев: 1  

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

Мы много раз рассказывали вам о том, что такое «Адаптивный веб-дизайн», и каким образом разные дизайны применяют этот термин и технологию. Теперь, когда мы ознакомились с некоторыми примерами реализации в действии, давайте попробуем разработать собственный адаптивный сайт!

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Web Design</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="mainBG" class="homeContent" data-type="background">
</div><!--end div "mainBG"-->
</body>
</html>

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

body, div, img, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt,
blockquote, fieldset, legend, label, input, textarea {
margin: 0; padding: 0; border: 0;
}
sh1, h2, h3, h4, h5, h6, p {
margin: 0 0 1em 0;
}
h1{font-size: 200%;}
h2{font-size: 170%;}
h3{font-size: 160%;}
h4{font-size: 140%;}
h5{font-size: 120%;}

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

html, body { height: 100%; }

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

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

.homeContent {
height: 100%;
width: 100%;
position: relative;
margin: 0 auto;
}

#mainBG {
background: url(images/big.jpg) no-repeat scroll;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}

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

@media only screen and (max-width: 1024px) and (orientation:landscape) {
#mainBG { background: url(images/medium.jpg) 50% 0 no-repeat scroll !important;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
#mainBG { background: url(images/medium.jpg) 50% 80% no-repeat scroll !important;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}

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

@media only screen and (min-width: 0px) and (max-width: 767px) {
#mainBG { background: url(images/small.jpg) 75% 80% no-repeat scroll !important;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}

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

Скачать исходный код примера, разработанного в ходе руководства. Продолжение следует ...
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: адаптивный дизайн
Опубликовал Design FactoRy   Прочитано (раз): 17559   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 26 августа 2012 @ 15:34
Написал: mrnobody — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Я запутался, а зачем мы задаем в альтернативном свойстве background позиционирование + делаем свойство !важным, а затем пишем отдельное свойство background-position? Ведь когда мы пишем !important, то специфичность свойства сильно повышается, а тут я чего-то не пойму, зачем так сделано.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031