Приветствую вас дорогие друзья! В этом уроке я покажу, как можно создать адаптивный шаблон!
В прошлой статье я писал о том, как создать простой шаблон для сайта на три колонки, сегодня мы переделаем этот шаблон, сделав его адаптивным.
Итак, приступим!
Для начала давайте разберемся, что же такое адаптивный шаблон и вообще адаптивный веб-дизайн в целом:
Адаптивный веб-дизайн (англ. Responsive Web Design) — дизайн веб-страниц, обеспечивающий корректное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера. Источник: Википедия - Адаптивный веб-дизайн.
Из определения следует, что дизайн должен подстраиваться под заданные размеры окна браузера, но как это подстраиваться? Что под этим подразумевается?
Под этим подразумевается то, что ваш сайт будет производить цепочку следующих действий:
- Скрытие элемента
- Изменение ширины и высоты элемента
- Изменение отступов
- Изменение свойств элемента
Допустим, вы захотели создать адаптивный шаблон своего сайта – с чего начать? Здесь я бы выделил 2 основных этапа:
- Определиться со списком размеров окон, под которые будет создаваться шаблон
- Создать (нарисовать) прототипы (макеты) сайтов под выбранные размеры окон
С первым пунктом, я думаю, всё понятно, просто определяете список размеров окон – он может быть, например, таким:
- 960 px и более – портативные компьютеры (ноутбуки) и планшеты в альбомной ориентации
- 768 px — Планшетные компьютеры в портретной ориентации;
- 600 px — Небольшие планшеты;
- 480 px — Мобильные устройства в альбомной ориентации;
- 320 px — Мобильные устройства (портретная ориентация);
Пример ориентации:
Разберем второй пункт: на этом этапе, проще говоря, нам нужно продумать расположение элементов отдельно под планшет, отдельно под телефон, отдельно под компьютер и так далее.
Давайте рассмотрим простой пример: допустим, у меня есть вот такой макет:
У него задана максимальная ширина в 960px.
Составим такие условия:
- если ширина окна больше 800(px), то показываем макет № 1.
- если ширина окна будет больше 600(px), но меньше 800(px), то пользователь будет видеть макет № 2.
- если ширина окна будет меньше 600(px), то пользователь будет видеть макет № 3.
Теперь рассмотрим второй и третий макеты.
Второй макет:
Как видно с картинки, мы убрали (скрыли) левую колонку и растянули область контента на освободившуюся область
Третий макет:
Здесь мы вытянули область контента и правую колонку на всю ширину, но, при этом, правую колонку поместили под контент.
Теперь давайте рассмотрим, как это всё реализуется!
HTML код:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Простой шаблон сайта</title>
</head>
<body>
<div id="wrapper">
<div id="header">Шапка</div>
<div id="left_sidebar">Левая колонка</div>
<div id="content">Контент</div>
<div id="right_sidebar">Правая колонка</div>
<div id="footer">Подвал</div>
</div>
</body>
</html>
Здесь обычная блочная верстка, единственно, что стоит отметить, это обязательное наличие мета тега “viewport”, благодаря которому мы указываем браузеру, чтобы тот автоматически не масштабировал сайт
Как итог, сайт будет нормально отображаться и на планшетах и на телефоне.
CSS код:
*{
margin:0;
padding:0;
text-align: center;
font-size: 20px;
color: #333;
}
#wrapper{
max-width: 960px;
margin: 20px auto;
}
#header{
padding: 20px;
background: #3BBCF2;
clear: both;
}
#left_sidebar{
width: 16%;
height: 300px;
float: left;
background: #FAFABF;
padding: 2%;;
}
#content{
width: 56%;
height: 300px;
float: left;
background: #E0E0E0;
padding: 2%;
}
#right_sidebar{
width: 16%;
height: 300px;
float: left;
background: #DBA0F0;
padding: 2%;
}
#footer{
clear: both;
background: #A9B4FF;
padding: 2%;
}
/* МЕДИА ЗАПРОС для ширины в 800px */
@media only screen and (max-width : 800px),
only screen and (max-device-width : 800px){
#content{
width: 76%;
}
#left_sidebar{
display:none;
}
}
/* МЕДИА ЗАПРОС для ширины в 600px */
@media only screen and (max-width : 600px),
only screen and (max-device-width : 600px){
#content{
width: 96%;
}
#right_sidebar{
width: 96%;
clear:both;
}
}
Родительскому блоку (wrapper) задаем максимальную ширину в 960(px) – от нее и будем отталкиваться.
Для всех дочерних элементов ширину и отступы необходимо задавать в процентах.
- Ширина колонок по 16% и 2% на отступы
- Ширина контента 56% и 2% на отступы
Итого: 16 + 2 + 2 + 16 + 2 +2 + 56 + 2 + 2 = 100(px)
Как вы поняли, 100% – это 960 px.
Самое интересное здесь – это два последних медиа запроса, благодаря которым и реализуется перестраивание элементов на сайте в зависимости от ширины окна.
В первом запросе мы увеличиваем ширину контента на 20 процентов, а левую колонку скрываем с помощью – “display:none;”.
Во втором запросе ширина контента равна 96% – не забываем про отступы в 2% с каждой стороны (96 + 2+ 2 = 100), и правой колонке задаем свойство – “clear:both;” – это является необязательным (запрещает обтекание элемента другими элементами), так как при полной ширине блока, он все равно перескочит под контент.
Представлен самый простой пример, созданный в целях понимания.
На этом урок по верстке подошел к завершению, это всё, чем я хотел с вами сегодня поделиться.
Прилагаю исходные файлы и демонстрационный вариант, подписывайтесь на обновления, пока!
Demo пример
Скачать адаптивный шаблон
Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.
Да, но вы потеряли левую колонку на малых экранах!!! И просьба дописать в статье , как сделать сдвиг колонки например левой в вверх контента а правой в низ! например мой код /* МЕДИА ЗАПРОС для ширины в 800px */ @media only screen and (max-width : 800px), only screen and (max-device-width : 800px){ #content{ width: 96%; } #left_sidebar{ width: 96%; clear:inherit; } #right_sidebar{ width: 96%; clear:both; } } /* МЕДИА ЗАПРОС для ширины в 600px */ @media only screen and (max-width : 600px), only screen and (max-device-width : 600px){ #content{ width: 96%; } #right_sidebar{ width: 96%; clear:both; } }
Данный пример адаптивного шаблона на тот случай, если нужно убрать какой-то контент, оставив на мобильных устройствах только самое нужное. А так да, если нужно сохранить весь контент, то левая колонка пропадает. Чтобы сделать сдвиг левой колонки в вверх контента, а правой в низ, достаточно прописать ширину для этих 3х блоков, большую 50% – у вас это прописано в запросе для ширины в 800px – это должно работать.