Адаптивная верстка сайта (от английского, responsive web design, иногда — adaptive web design) — это создание структуры HTML-документа на базе HTML-разметки, предусматривающей автоматическую адаптацию веб-страницы в зависимости от размера экрана устройства пользователя. Иными словами - это макет веб-страницы, автоматически подстраивающийся под размер экрана разнообразных гаджетов пользователя, таких как планшеты и смартфоны. В адаптивной вёрстка предполагается использование современных технологий, делающих основные элементы, изменяющими свой размер и расположение на странице, исходя из ширины окна. При этом отсутствуют и полосы прокрутки. Для просмотра контента достаточно просто листать страницы вниз. Для отображения на смартфонах и планшетах лишние элементы отсеивают: убирают графические объекты, сворачивают меню, оставляя только самые значимые блоки. Параллельно увеличивается размер элементов управления, чтобы нужную кнопку без труда можно было нажать пальцем, ведь на обычном сайте попасть по ссылке с первого раза удается не всегда. Все это достигается с помощью медиа-запросов, которые лежат в основе данной технологии, меняют масштаб элементов, а CSS свойства дают полную свободу действий, управляя компоновкой и расположением блоков на странице, автоматически преобразуя шаблон. Данная статья рассматривает применение адаптивной резиновой вёрстки при создании главной страницы. Основные примеры создания приведены в статье Отзывчивый дизайн.

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

Мы будем использовать сематические элементы - элементы, четко описывающие их значения как для браузера, так и для разработчика. Примеры не семантических элементов: (div) и (span) — ничего не говорит о его содержимом. При этом примеры семантических элементов: (form), (table) и (article) — четко определяет его содержание. Страница будет состоять из пяти основных блоков: Шапка сайта или хедер (от анг. header — заголовок) – это титульная верхняя часть страницы, в которой располагаются элементы навигации (nav или меню) и элементы, содержащие информацию о сайте, блок основного содержимого (section), блок вспомогательного содержимого (article) и (aside) — это боковая панель сайта, визуально разграниченная с контентом на странице. Благодаря ее блокам посетители понимают, что и где расположено на сайте (ранее мы знали ее как сайдбар). Ширина боковой панели обычно меньше ширины основного блока с контентом. подвал или футер (от анг. footer - нижний колонтитул) — блок в нижней части страницы. За основу преломления шаблона возьмём 768px и 480px.

CSS

/* Устройства с очень маленьким экраном (смартфоны, меньше 768px) */
/* Стили CSS (по умолчанию) - для ширины viewport <768px */
 
/* Устроства с маленьким экраном (планшеты, 768px и выше) */
@media (min-width: 768px) {
/* Стили для устройств с шириной viewport, находящейся в диапазоне 768px - 991px */
}
 
/* Устройства со средним экраном (ноутбуки и компьютеры, 992px и выше) */
@media (min-width: 992px) {
  /* Стили для устройств с шириной viewport, находящейся в диапазоне 992px - 1199px */
}
 
/* Устройства с большим экраном (компьютеры, 1200px и выше) */
@media (min-width: 1200px) {
  /* Стили для устройств с шириной viewport >1200px */
}

Так-же правильным будет создать папки js (для хранения файлов скриптов), css (для хранения файлов стилей) и images (для картинок).

Создадим в одноименных папках файлы notebook.css и notebook.js. Так-же в папку css скачаем и разархивируем папку шрифтов «Font Awesome» – набора иконок, который используется для веб-разработки и создания интерфейсов. А в папку js скачаем и разархивируем библиотеки с набором функций JavaScript, фокусирующийся на взаимодействии JavaScript и HTML. (min - минимальный набор функций) и плагин prefixfree, дающего возможность исключать префиксы, у свойств таблицы CSS, которые еще не до конца стандартизированы. Так-же поступим с папкой images.

Добавим в блок <head> (голова) запись кода приведенного ниже и открыв «Пояснительную записку блока <head>:« разберем данный код:

HTML

<!--начало веб страницы-->
<!DOCTYPE html> 
<html>
<!--начало блока метаданных веб страницы-->
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive site layout</title>
  <link type="Image/x-icon" href="images/favicon.ico" rel="shortcut icon">
  <!-- our project just needs Font Awesome Solid + Brands -->
  <link rel="stylesheet" type="text/css" href="css/Font-Awesome-6.x/css/all.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/Font-Awesome-6.x/css/v4-shims.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/notebook.css">
  <script src="js/jquery/2.2.2/jquery.min.js"></script>
  <script src="js/prefixfree/1.0.7/prefixfree.min.js"></script>
  <script src="js/notebook.js"></script>
</head>
<!--конец блока метаданных веб страницы-->

CSS

/* Общие стили
----------------------------------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display:block;}
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }
a {
border-bottom: 1px dotted #BBBBBB;
color: #333333;
text-decoration: none;}
#navbar-iframe{height:0px; display:none}
 
/* Конец и сброс стиля */
body {
background:url(../images/notebook_body.png);      /*общий фон страницы*/
font-family: Geneva, Arial, Helvetica, sans-serif;/*шрифты для заголовка*/
   font-size: 14px;                               /* Размер текста */
   line-height: 1;                                /*межстрочный интервал текста*/
   color: #000000;                                /*цвет текста #000000-черный*/}
p {padding: 0 0 1.3em;}
h1, h2 , h3, h4, h5, h6 {
display:block;
color:#13382A;
line-height:100%;
font-family:Droid Serif, Georgia, serif;
text-shadow:1px 1px #fff;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {text-decoration:none;}
h1 {letter-spacing:-2px;}
h2 {
font-size:16px;
margin:10px 0 15px;
font-weight:bold;
}
a {
color:#333;
border-bottom: 1px dotted #bbb;
text-decoration:none;
}
a:hover {
color:#A3A30E;
border-bottom: 1px dotted #A3A30E;
}
 
/* стиль внешней оболочки всей видимой страницы Outer-Wrapper
----------------------------------------- */
#outer-wrapper {
width:922px;
margin:10px auto 0;
padding:0px;
text-align:left;
font: normal normal 100% Georgia, Serif;  
}

В данный блок поместим логотип, слоган, меню (в нашем случае кнопку скрытого меню) и верхнюю часть картинки- тела нашей веб-страницы и открыв «Пояснительную записку блока main» разберем данный код:

HTML

<!--начало тела веб страницы-->
<body>
<!-- Начало внешней оболочки всей видимой страницы "outer-wrapper"-->
<div id='outer-wrapper'>
    <!-- Начало верхнего колонтитула-->
	<!-- В себя включает заголовок страницы - ссылку на главную страницу, 
	описание сайта и меню навигации-->
        <header id='header-wrapper'>
        <nav class='header section' id='header'>
            <div id='header-inner'>
                <div class='titlewrapper'>
		<a href="tryhow_js_mobile_navbar_hor.php">
		    <h1 class='title'>Notebook</h1>
                </a>
                </div>
                <!-- Начало описания "description" сайта -->
                <div class='descriptionwrapper'>
                <p class='description'>
		    <span>Наша записная книга</span>
		</p>
                </div>
		<!-- Конец описания "description" сайта-->
                <!-- Скрытое меню навигации -->
                <div class="topnav">
                    <div id="myLinks">
                        <a href=""> О Нас </a>
                        <a href="tryhow_js_mobile_navbar_hor.php"> Контакт </a>
                        <a href="tryhow_js_mobile_navbar_hor.php"> Новости </a>
                    </div>
		    <!-- Кнопка бургер меню навигации -->
		    <div id="menu_btn" class="openbtn" onclick="myFunction()" href="javascript:void(0);">
                         <span></span>
                         <span></span>
                         <span></span>
                    </div> 		
                </div>
                <!-- Конец блока названия сайта и меню навигации -->
            </div>                
			<!-- Конец меню навигации сайта -->
        </nav>
    </header>
<!-- Конец верхнего колонтитула-->
 
 
</div>
<!-- Конец внешней оболочки всей видимой страницы "outer-wrapper"-->
</body>

CSS

/* стили верхнего колонтитула header
----------------------------------------- */
#header-wrapper {
background:url(../images/notebook_header_ch.png) no-repeat;
height:110px;
padding:24px 50px 0 75px;
position:relative;}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;}
#header {
margin: 0px;
color:#666666;}
#header h1 {
margin: 0px;
font-family:Droid Serif, Georgia, serif;
font-weight:bold;
font-size:30px;
color:#0C211A;
text-shadow:1px 1px #fff;
letter-spacing:-2px;
padding:0;
line-height:40px;}
#header a {
color:#666666;
text-decoration:none;border:none;  }
#header a:hover {  color:#666666;  }
 
/* стили слогана
----------------------------------------- */
#header .description {
margin: 0px;
padding:0px;
font-size:10px;
color:#666;
text-transform:uppercase;
font-family:Arial, Helvetica, sans-serif; }
 
 
 
 
/* стили кнопка навигации
----------------------------------------- */
 
.topnav #myLinks {
  display: none;
  position: absolute;         /* позиционируется относительно ближайшего родительского элемента */
  cursor: pointer;            /* форму курсора, когда он находится в пределах элемента. */
  height:42px;                /* высота кнопки*/
  border-radius: 3px;         /* радиус углов кнопки */
  right: 136px;               /* отступ справа совпадает с началом кнопки */
  top: 31px;                  /* отступ сверху кнопки */
 
 
}
 
.topnav a {
  float: right;
  padding: 10px 12px;         /*высота от верха кнопки и растояние между кнопками*/
  font-size: 20px;            /*высота шрифта*/
  border-radius: 3px;         /* радиус углов кнопки */
  background-color:#c0c0c0;   /* Цвет символа */
}
 
/* настройка кнопки меню */
.openbtn {
  position: absolute;          /* позиционируется относительно ближайшего родительского элемента */
  background:#696969;          /*Цвет кнопки серый*/
  cursor: pointer;             /* форму курсора, когда он находится в пределах элемента. */
  width: 50px;                 /* ширина кнопки */
  height:42px;                 /* высота кнопки*/
  border-radius: 3px;          /* радиус углов кнопки */
  right: 90px;                 /* отступ справа кнопки */
  top: 31px;                   /* отступ сверху кнопки */
}
 
/* настройка полос кнопки меню */
.openbtn span{
    display: inline-block;     /* разрешение устанавливать ширину и высоту элемента */
    position: absolute;        /* позиционируется относительно ближайшего родительского элемента */
    height:3.5px;              /* ширина полосы */
    width: 30px;               /* длина полосы */
    background: #fff;          /* цвет полосы */
    left: 10px;                /* отступ от края кнопки слева */
  }
 
/* span (1)расположение первой полосы относитель верхней границы кнопки */
.openbtn span:nth-of-type(1) {
    top:10px;	
}
 
/* span (2)расположение второй полосы относитель верхней границы кнопки */
.openbtn span:nth-of-type(2) {
    top:20px;
}
 
/* span (3)расположение третей полосы относитель верхней границы кнопки */
.openbtn span:nth-of-type(3) {
    top:30px;
}

В данный блок поместим логотип, слоган, меню (в нашем случае кнопку скрытого меню) и верхнюю часть картинки- тела нашей веб-страницы и открыв «Пояснительную записку блока main» разберем данный код:

JavaScript

function myFunction() {
  var x = document.getElementById("myLinks");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

• папка шрифтов «Font Awesome»
• библиотеки с набором функций JavaScript
• плагин prefixfree
• папки images с иконками, картинкой фона и т.д.
• архив папки примера notebook