Адаптивная верстка сайта

Предлагаю простой код шаблона адаптивной вёрстки для сайта. Используя html5 и css3.


Код шаблона адаптивной верстки сайта


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8"/>
<title>Моя первая страница</title>
<meta name="description" content="Пробный вариант страницы">
<meta name="keywords" content="страница, контент">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>Заголовок страницы (шапка сайта)</header>
<nav>Меню навигации (хлебные крошки)</nav>
<aside>Боковая колонка (SideBar)</aside>
<article>Контент - основное содержимое страницы.</article>
<footer>Подвал страницы.</footer>
</body>
</html>

Макет шаблона у меня находится здесь, поэтому теги, которые не выделены жирным шрифтом, описывать не буду, они есть там.

<meta name="viewport" content="width=device-width, initial-scale=1"/>
Нужен для адаптации под мобильные телефоны.

<link rel="stylesheet" href="style.css" />
Подключает стили для сайта.

<header>
Обычно располагается логотип сайта.

<nav>
Навигация сайта, чтобы понять в каком месте вы находитесь.

<aside>
Обычно используют для меню.

<article>
Контент страницы.

<footer>
Здесь располагаются счётчики, контактная информация, copyring.

style.css


header {
background: #F0999E;
height: 90px;
width: 100%;
margin: 0 auto;
clear: both;
}

nav {
background: #F2299E;
height: 90px;
width: 100%;
margin: 0 auto;
clear: both;
}

aside { /* Правая колонка */
background: #11aa11;
height: 90px;
width: 200px; /* Ширина правой колонки */
float: right; /* Обтекание */
}

article { /* Левая колонка */
background: #66DA0E;
height: 90px;
margin-right: 240px; /* Отступ справа */
}

footer {
background: #F0DA0E;
width: 100%;
height: 90px;
margin: 0 auto;
clear: both;
}

@media screen and (max-width: 768px) {
header {
font-size: 0.7em;
}
aside, article {
margin-left:0px;
margin-top:25px;
float:none;
width:100%;
}
}

Если ширина экрана будет меньше 768 пикселей, то будем считать что просмотр страницы с телефона, а значит опускаем сайдбар под основной контент и делаем его ширину 100%.

Пример с компьютера и мобильного телефона страница будет выглядеть по разному.


Понравилась страница? Поделитесь ссылкой в социальных сетях. Поддержите проект!