Создаем адаптивный шаблон для сайта!

Приветствую вас дорогие друзья! В этом уроке я покажу, как можно создать адаптивный шаблон!

Создаем адаптивный шаблон для сайта!

В прошлой статье я писал о том, как создать простой шаблон для сайта на три колонки, сегодня мы переделаем этот шаблон, сделав его адаптивным.

Итак, приступим!

Для начала давайте разберемся, что же такое адаптивный шаблон и вообще адаптивный веб-дизайн в целом:

Адаптивный веб-дизайн (англ. Responsive Web Design) — дизайн веб-страниц, обеспечивающий корректное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера.
Источник: Википедия - Адаптивный веб-дизайн.

Из определения следует, что дизайн должен подстраиваться под заданные размеры окна браузера, но как это подстраиваться? Что под этим подразумевается?

Под этим подразумевается то, что ваш сайт будет производить цепочку следующих действий:

  • Скрытие элемента
  • Изменение ширины и высоты элемента
  • Изменение отступов
  • Изменение свойств элемента

Допустим, вы захотели создать адаптивный шаблон своего сайта – с чего начать? Здесь я бы выделил 2 основных этапа:

  1. Определиться со списком размеров окон, под которые будет создаваться шаблон
  2. Создать (нарисовать) прототипы (макеты) сайтов под выбранные размеры окон

С первым пунктом, я думаю, всё понятно, просто определяете список размеров окон – он может быть, например, таким:

  • 960 px и более – портативные компьютеры (ноутбуки) и планшеты в альбомной ориентации
  • 768 px — Планшетные компьютеры в портретной ориентации;
  • 600 px — Небольшие планшеты;
  • 480 px — Мобильные устройства в альбомной ориентации;
  • 320 px — Мобильные устройства (портретная ориентация);

Пример ориентации:

Пример ориентации

Портретная и альбомная ориентация соответственно

 

Разберем второй пункт: на этом этапе, проще говоря, нам нужно продумать расположение элементов отдельно под планшет, отдельно под телефон, отдельно под компьютер и так далее.

Давайте рассмотрим простой пример: допустим, у меня есть вот такой макет:

прототип сайта

Макет № 1

 

У него задана максимальная ширина в 960px.

Составим такие условия:

  1. если ширина окна больше 800(px), то показываем макет № 1.
  2. если ширина окна будет больше 600(px), но меньше 800(px), то пользователь будет видеть макет № 2.
  3. если ширина окна будет меньше 600(px), то пользователь будет видеть макет № 3.

Теперь рассмотрим второй и третий макеты.

Второй макет:

Макет № 2

Макет № 2

Как видно с картинки, мы убрали (скрыли) левую колонку и растянули область контента на освободившуюся область

Третий макет:

Макет № 3

Макет № 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 пример

Скачать адаптивный шаблон


Хостинг, которым я пользуюсь: Good-Host


Похожие статьи

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

*

code

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>