Адаптивная вёрстка сайта, урок первый. Вёрстка главной страницы

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

Поисковые системы используют ряд критериев для оценки адаптивности сайта при просмотре на мобильных устройствах. Google старается упростить пользование Интернетом для владельцев смартфонов и планшетов, отмечая в мобильной выдаче адаптированные под мобильные устройства сайты специальной пометкой mobile-friendly. В Яндексе также работает алгоритм, который отдает предпочтение сайтам с мобильной/адаптивной версией для пользователей в мобильном поиске.

Проверить отображение страницы на мобильных устройствах можно на сервисах Яндекс.Вебмастер и Google Developers.

mobile-friendly-site
Рис. 1. Мобильная выдача Яндекса и Google с пометкой о дружелюбности сайта к мобильным устройствам

Что такое адаптивная вёрстка

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

Основные приёмы создания адаптивного сайта приведены в статье Отзывчивый и адаптивный дизайн сайта. Для отзывчивого дизайна ширина основного контейнера сайта задаётся в %, при этом она может быть равна как 100% ширины окна браузера, так и меньше. Ширина столбцов сетки также задаётся в %. В адаптивном дизайне ширина основного контейнера и столбцов сетки фиксируется с помощью значений в px.

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

Вёрстка главной страницы

Страница состоит из трёх основных блоков: верхний колонтитул (шапка), контейнер-обёртка для основного содержимого и сайдбара, и нижний колонтитул (футер). В качестве переломных точек дизайна возьмём 768px и 480px.

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

main-page
Рис. 2. Пример адаптивной верстки

Перейти на страницу

1. Метатеги и раздел <head>

1) Добавим в раздел <head> необходимые файлы — ссылку на используемые шрифты, библиотеку jQuery, а также плагин prefixfree (чтобы не писать для свойств браузерные префиксы):

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Адаптивная вёрстка сайта</title>
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic|Playfair+Display:400,700&subset=latin,cyrillic">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>

2. Шапка страницы

В шапке страницы <header> поместим следующие элементы-контейнеры:
логотип <a class="logo">;
кнопку для показа/скрытия главного меню <div class="nav-toggle">;
главное меню <ul id="menu">;
форму поиска по сайту <form id="searchform">.

<header>
    <nav class="container">
      <a class="logo" href="">
        <span>L</span>
        <span>O</span>
        <span>G</span>
        <span>O</span>
      </a>
      <div class="nav-toggle"><span></span></div>
      <form action="" method="get" id="searchform">
        <input type="text" placeholder="Искать на сайте...">
        <button type="submit"><i class="fa fa-search"></i></button>
      </form>
      <ul id="menu">
        <li><a href="">Блог</a></li>
        <li><a href="">Портфолио</a></li>
        <li><a href="">Об авторе</a></li>
      </ul>
    </nav>
  </header>

3. Блок с кратким содержанием статьи

Анонс статей обернём элементом <article id="post-1" class="post">:

<div class="container">
  <div class="posts-list">
    <article id="post-1" class="post">
      <div class="post-image"><a href=""><img src="https://html5book.ru/wp-content/uploads/2016/05/rasskaz_slovar_rodnoy_prirodi.jpg"></a></div>
      <div class="post-content">
        <div class="category"><a href="">Дизайн</a></div>
        <h2 class="post-title">Весна</h2>
        <p>Очень богат русский язык словами, относящимися к временам года и к природным явлениям, с ними связанным.</p>
        <div class="post-footer">
          <a class="more-link" href="">Продолжить чтение</a>
          <div class="post-social">
            <a href="" target="_blank"><i class="fa fa-facebook"></i></a>
            <a href="" target="_blank"><i class="fa fa-twitter"></i></a>
            <a href="" target="_blank"><i class="fa fa-pinterest"></i></a>
          </div>
        </div>
      </div>
    </article>
    <article id="post-2" class="post">
      ...
    </article>
  </div> <!-- конец div class="posts-list"-->

4. Боковая колонка

В боковую колонку <aside> добавим список категорий, последние записи и форму подписки на рассылку:

<aside>
  <div class="widget">
    <h3 class="widget-title">Категории</h3>
    <ul class="widget-category-list">
      <li><a href="">Дизайн</a> (2)</li>
      <li><a href="">Вёрстка</a> (5)</li>
      <li><a href="">Видео</a> (1)</li>
    </ul>
  </div>
  <div class="widget">
    <h3 class="widget-title">Последние записи</h3>
    <ul class="widget-posts-list">
      <li>
        <div class="post-image-small">
          <a href=""><img src="https://html5book.ru/wp-content/uploads/2016/05/rasskaz_slovar_rodnoy_prirodi.jpg"></a>
        </div>
        <h4 class="widget-post-title">Весна</h4>
      </li>
      <li>
        <div class="post-image-small">
          <a href=""><img src="https://html5book.ru/wp-content/uploads/2016/05/rasskaz_Russia.jpg"></a>
        </div>
        <h4 class="widget-post-title">Лето</h4>
      </li>
      <li>
        <div class="post-image-small">
          <a href=""><img src="https://html5book.ru/wp-content/uploads/2016/05/rasskaz_rodnaya_priroda_osen.jpg"></a>
        </div>
        <h4 class="widget-post-title">Осень</h4>
      </li>
    </ul>
  </div>
  <div class="widget">
    <h3 class="widget-title">Подписка на рассылку</h3>
    <form action="" method="post" id="subscribe">
      <input type="email" name="email" placeholder="Ваш email" required>
      <button type="submit"><i class="fa fa-paper-plane-o"></i></button>
    </form>
  </div>
</aside>
</div> <!-- конец div class="container"-->

5. Нижний колонтитул

В подвале страницы разместим информацию о копирайте, кнопки социальных сетей и ссылку на электронную почту:

<footer>
  <div class="container">
    <div class="footer-col"><span>Мой блог © 2016</span></div>
    <div class="footer-col">
      <div class="social-bar-wrap">
        <a title="Facebook" href="" target="_blank"><i class="fa fa-facebook"></i></a>
        <a title="Twitter" href="" target="_blank"><i class="fa fa-twitter"></i></a>
        <a title="Pinterest" href="" target="_blank"><i class="fa fa-pinterest"></i></a>
        <a title="Instagram" href="" target="_blank"><i class="fa fa-instagram"></i></a>
      </div>
    </div>
    <div class="footer-col">
      <a href="mailto:admin@yoursite.ru">Написать письмо</a>
    </div>
  </div>
</footer>
<script>
$('.nav-toggle').on('click', function(){
$('#menu').toggleClass('active');
});
</script>
</body>
</html>

6. Общие CSS-стили

Общие стили, сброс стилей браузера по умолчанию:

*, *:after, *:before {
box-sizing: border-box;
padding: 0;
margin: 0;
transition: .5s ease-in-out; /* добавим плавность переходов для всех элементов страницы*/
}
ul {
list-style: none;
}
a {
text-decoration: none;
outline: none;
}
img {
display: block;
width: 100%;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display';
font-weight: normal;
letter-spacing: 1px;
}
body {
font-family: 'Open Sans', arial, sans-serif;
font-size: 14px;
line-height: 1;
color: #373737;
background: #f7f7f7;
}
/* добавим очистку потока для всех контейнеров, внутри которых задано обтекание дочерних элементов */
header:after, .container:after, footer:after, .widget-posts-list li:after, #subscribe:after {
content: "";
display: table;
clear: both;
} 
/* стилевой класс, который управляет шириной контейнера сетки*/
.container {
margin: 0 auto;
width: 100%;
max-width: 960px;
padding: 0 15px;
} 

7. Стили для шапки и её содержимого

header {
width: 100%;
background: white;
box-shadow: 3px 3px 1px rgba(0,0,0,.05);
padding: 15px 0;
margin-bottom: 30px;
position: relative;
}
nav {
width: 100%; 
}
/* логотип */
.logo {
display: block; 
float: left;
}
.logo span {
color: white;
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
margin: 5px 0;
text-align: center;
text-shadow: 2px 2px 1px rgba(0,0,0,.4);
}
.logo span:nth-child(odd) {
background: #EF5A42;
}
.logo span:nth-child(even) {
background: #F8B763;
}
/* меню */
#menu {
float: right;
}
#menu li {
display: inline-block;
margin-right: 30px;
}
#menu a {
color: #111;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
display: block;
line-height: 40px;
}
#menu a:hover {
color: #EF5A42;
}
#menu li:last-child  {
margin-right: 0;
}
/* форма поиска */
#searchform {
float: right;
margin-left: 46px;
display: inline-block;
position: relative;
}
#searchform input {
width: 170px;
float: left;
border: none;
padding-left: 10px;
height: 40px;
overflow: hidden;
outline: none;
color: #9E9C9C;
font-style: italic;
}
#searchform button {
background: transparent;
height: 40px;
border: none;
position: absolute;
right: 10px;
color: #EF5A42;
cursor: pointer;
font-size: 18px;
}
#searchform input:focus {
outline: 2px solid #EBEBE3;
}
/* кнопка переключения меню, появляющаяся при ширине 768px */
.nav-toggle {
display: none;
position: relative;
float: right;
width: 40px;
height: 40px;
margin-left: 20px;
background: #EF5A42;
cursor: pointer;
}
.nav-toggle span {
display: block;
position: absolute;
top: 19px;
left: 8px;
right: 8px;
height: 2px;
background: white;
}
.nav-toggle span:before, .nav-toggle span:after {
content: "";
position: absolute;
display: block;
left: 0;
width: 100%;
height: 2px;
background: white;
}
.nav-toggle span:before {
top: -10px;
}
.nav-toggle span:after {
bottom: -10px;
}
/* класс, который будет добавлен в верхнему меню при нажатии на кнопку и покажет скрытое меню*/
#menu.active {
max-height: 123px;
}

8. Стили для блока с основным содержимым

/* левый контейнер */
.posts-list {
margin-bottom: 30px;
width: 64%;
float: left;
}
/* блок для статьи */
.post {
margin-bottom: 35px;
}
.post-content p {
line-height: 1.5;
padding-bottom: 1em;
}
.post-image {
margin-bottom: 30px;
}
.category {
margin-bottom: 15px;
}
.category a {
color: #F8B763;
text-transform: uppercase;
}
.post-title {
margin-bottom: 12px;
font-size: 26px;
}
/* блок с кнопкой "продолжить чтение" и кнопками социальных сетей */
.post-footer {
border-top: 1px solid #EBEBE3;
border-bottom: 1px solid #EBEBE3;
position: relative;
margin-top: 15px;
}
.more-link {
position: relative;
display: inline-block;
font-size: 10px;
text-transform: uppercase;
color: white;
line-height: 44px;
padding: 0 22px;
background: #3C3D41;
letter-spacing: 0.1em;
white-space: nowrap;
}
.more-link:after {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
top: 0;
right: 0;
border: solid transparent;
border-width: 22px 18px;
border-left-color: #3C3D41;
transform: translateX(100%);
}
.post-social {
position: absolute;
left: auto;
top: 50%;
right: 0;
text-align: right;
transform: translateY(-50%);
padding: 0;
font-size: 12px;
}
.post-social a {
display: inline-block;
margin-left: 8px;
color: #F8B763;
width: 25px;
height: 25px;
line-height: 23px;
text-align: center;
border-radius: 50%;
border: 1px solid;
}

9. Стили для боковой колонки

/* правый контейнер */
aside {
width: 33%;
float: right;
}
/* блок для виджетов */
.widget {
padding: 20px 15px;
background: white;
font-size: 13px;
margin-bottom: 30px;
box-shadow: 3px 3px 1px rgba(0,0,0,.05);
}
.widget-title {
font-size: 18px;
padding: 10px;
margin-bottom: 20px;
text-align: center;
border: 2px solid #F8B763;
box-shadow: 3px 3px 0 0 #F8B763;
}
.widget-category-list li {
border-bottom: 1px solid #EBEBE3;
padding: 10px 0;
color: #c6c6c6;
font-style: italic;
}
.widget-category-list li:last-child {
border-bottom: none;
}
.widget-category-list li a {
color: #626262;
margin-right: 6px;
font-style: normal;
}
.widget-category-list li a:before {
content: "\f105";
display: inline-block;
font-family: 'FontAwesome';
margin-right: 10px;
color: #c6c6c6;
}
.widget-posts-list li {
border-top: 1px solid #EBEBE3;
padding: 15px 0;
}
.widget-posts-list li:nth-child(1){
border-top: none;
}
.post-image-small {
width: 30%;
float: left;
margin-right: 15px;
}
.widget-post-title {
float: left;
}
/* форма подписки */
#subscribe {
position: relative;
width: 100%;
padding: 15px 0;
}
#subscribe input {
width: 100%;
display: block;
float: left;
border: 2px solid #EBEBE3;
padding: 0 0 0 10px;
height: 40px;
position: relative;
outline: none;
color: #9E9C9C;
font-style: italic;
}
#subscribe button {
padding: 0 15px;
background: transparent;
height: 40px;
border: none;
position: absolute;
right: 0;
color: #EF5A42;
cursor: pointer;
font-size: 18px;
}
#subscribe input:focus + button {
background: #EF5A42;
color: white;
}

10. Стили для нижнего колонтитула

Подвал сайта разделим на три равных столбца:

footer {
padding: 30px 0;
background: #3C3D41;
color: white;
}
.footer-col {
width: 33.3333333333%;
float: left;
}
.footer-col a {
color: white;
}
.footer-col:last-child {
text-align: right;
}
.social-bar-wrap {
text-align: center;
}
.social-bar-wrap a {
padding: 0 7px;
font-size: 18px;
}

11. Медиа-запросы

@media (max-width: 768px) {
/* показываем кнопку для переключения верхней навигации */
.nav-toggle {
display: block;
}
header {
padding: 10px 0;
}
/* скрываем верхнее меню, отменяем обтекание, позиционируем его, сместив на высоту шапки сайта */ 
#menu {
max-height: 0;
background: white;
float: none;
position: absolute;
overflow: hidden;
top: 63px;
right: 0;
left: 0;
margin: 0;
padding: 0;
z-index: 3;
}
/* делаем элементы списка блочными, чтобы они располагались друг под другом */
#menu li {
display: block;
padding-left: 15px;
border-bottom: 1px solid #EBEBE3;
margin-right: 0;
}
/* отменяем обтекание левой и правой колонок, устанавливаем им ширину 100%*/
.posts-list, aside {
width: 100%;
float: none;
}
.widget-post-title {
font-size: 1.5em;
}
}
@media (max-width: 480px) {
/* выравниванием логотип по центру */
nav {
text-align: center;
}
/* отменяем обтекание для логотипа */
.logo {
float: none;
margin-bottom: 15px;
}
/* позиционируем меню на увеличившуюся высоту шапки */
#menu {
top: 118px;
}
/* позиционируем форму поиска по левому краю */
#searchform {
float: left;
margin-left: 0;
}
/* убираем верхнюю и нижнюю границы и выравниваем кнопку по центру */
.post-footer {
border-top: none;
border-bottom: none;
text-align: center;
}
/* отменяем позиционирование кнопок соцсетей */
.post-social {
position: static;
text-align: center;
transform: none;
margin-top: 20px;
}
.widget-post-title {
font-size: 1.2em;
}
/* отменяем обтекание для столбцов подвала страницы */
.footer-col {
float: none;
margin-bottom: 20px;
width: 100%;
text-align: center;
}
.footer-col:last-child {
text-align: center;
margin-bottom: 0;
}
}

12. Скрипт для мобильного меню

За показ-скрытие верхнего меню при клике на кнопку (переключается высота меню — от нулевой до равной её содержимому) отвечает код jQuery, который мы ранее добавили в разметку страницы перед закрывающим тегом </body>:

<script>
$('.nav-toggle').on('click', function(){
  $('#menu').toggleClass('active');
});
</script>
  • Создание Сайтов

    По поводу удобочитаемых шрифтов в понимании Яндекса. Специально проверял. На сайте стоит 13px. Яндекс видимо ни хера не видит и объявляет: на сайте используется неудобочитаемый шрифт. Увеличьте ваш шрифт не менее 12px. Если слепой ведет слепого то куда он его заведет.

    По поводу этого поста. Идея конечно хорошая, но мое мнение, что блог, это не совсем то, что действительно нужно для адаптивного макета. Почему. Потому что статьи которые будут в блоге, а это 2000-5000 знаков + картинки и другие элементы контента, будут выглядеть бесконечной портянкой, которую мотать придется долго. Блог, предпочтительно делать нормальным без адаптивной верстки. Это мое мнение. Не буду заверять, что это для всех блогов. А вот типичный интернет магазин, где на странице карточки товара, нужно отсекать все лишнее, это действительно надо бы делать, чтобы клиент не отвлекся на неудобства и не психанул и не передумал покупать. А блоги, они не стоят того, чтобы их делать адаптивными.

    Ну и еще одно мое мнение, но только мое личное 🙂 — адаптивный дизайн, это проходящая ступень, которая в ближайшем будущем просто останется не востребованной. Кто ей пользуется? Только специалисты. Всем остальным пользователям как-то по бинг-бонгу есть он или нет. Тем более что и в европе, это уже становится не актуально, у них сейчас другие цели, чтобы пользователь не выходя в интернет мог на своем компе найти то, что его интересует и просмотреть в пределах своего компа не выходя в сеть. Может это будет не совсем так, но что-то где-то так. Да и сайты в будущем будут совершенно другие, абсолютно не то.

    Правильно замечено, что число устройств с разными разрешениями экранов растет. Поэтому, адаптивная верстка рано или поздно не справится с этой задачей, как например невозможно было справиться с такими изобретениями века как ИЕ6 ИЕ7 ИЕ8 ИЕ9. Все костыли, которые пытались подставлять работали на разных операционных системах по разному и не решали в целом задачи. Так и с нарастающим использованием устройств с самыми разнообразными экранами, адаптивная верстка будет как в поговорке — одно лечит другое калечит.

    Еще раз подчеркиваю, что адаптивная верстка нужна, но не как окончательный вариант создания современных сайтов, а как один из вариантов решать какие небольшие задачи в макете сайта, применяя ее там, где это действительно нужно и оправданно. Не думаю, что в варианте с блогом, это будет оправданно. Локальное применение это дело, а делать все сайты полностью адаптивными лишь потому что кому-то взбрела идея в голову брать это за окончательный вариант создания сайта адаптивную верстку от и до, не есть разумно.

    • Не совсем поняла насчёт размеров шрифта для Яндекса. Насчёт оптимизации под мобильные устройства смотрите картинки

      • Создание Сайтов

        Я проверял свой сайт где у меня стоит размер шрифта 13px в таблице.

      • Создание Сайтов

        Яндекс тупит как всегда: много мелкого текста. рекомендуем не мене 12px. аж бесит.

        • Не знаю, какой алгоритм у Яндекса, но то, что разные шрифты одного размера отображаются на экране разным размером, это факт.

          • Создание Сайтов

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

          • Шрифт, каким пользователь читает сайт, задаёте вы сами с помощью свойств font-family и font-size, например, body {
            font-family: ‘Open Sans’, arial, sans-serif; font-size: 14px;} Это значит, что текст на сайте будет отображён шрифтом Open Sans размером 14px. Если по какой-то причине браузер пользователя не сможет отобразить текст указанным шрифтом, текст будет отображён шрифтом arial размером 14px.

          • Создание Сайтов

            Ну вот этого яндекс не понимает. Там стоит якобы умная система, дающая рекомендации, а там просто для всех не задач, стоит один и тот же ответ. Они забраковали файл image-sitemap.xml, что мол что за странные теги в нем. А оказалось что их роботы просто не знают такого файла. Поэтому все что они там пишут — это понты на 60-70%, остальное действует только для москвы.

          • Яндекс.Вебмастер так и пишет, что «Поиск Яндекса не поддерживает передачу информации об изображениях, RSS/Atom-фидов с помощью файла Sitemap.» Поэтому ничего удивительного.

        • Насчёт региональной выдачи вы правы, логика отличается, так как жёсткая конкуренция и преобладающее количество привередливых пользователей мобильного интернета только в столице. И если вы обратили внимание, то сайты, адаптированные под мобильные устройства лучше ранжируются когда вы заходите в интернет с мобильных устройств.

          • Создание Сайтов

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

            Урок однозначно полезный. Просто я не согласен с предисловием. Я так понял что будет продолжение по другим страницам этого сайта?

          • Посмотрите статистику Яндекса по развитию интернета в регионах России https://yandex.ru/company/researches/2016/ya_internet_regions_2016#dostupvinternetsraznyxustrojjstv. Люди во всех регионах России стали пользоваться мобильными устройствами чаще для выхода в интернет.

          • Продолжение да, будет.

          • Создание Сайтов

            Посты будут без шапки и подвала и правого блока?

          • Детально ещё не прорабатывала, будет страница с видео, галерея для портфолио, одиночная запись, страница со слайдером и может что-то ещё. Конечно, для тех, кто пользуется готовыми шаблонами эти уроки не столь полезны, но я хочу детально разобрать, как собираются страницы, как позиционируются и элементы, как создаются адаптивные страницы.

          • Создание Сайтов

            Однозначно это будет уникально, полезно и востребовано. Ну и пища для новых идей.

          • Борис Бакуров

            Вы все правильно делаете. Продолжайте и не обращайте внимания на непонимающих Вас людей. Большинство оценит и поддержит. Главное не останавливайтесь и следуйте к своей цели.
            Это Вам подарок за ваши труды. Эксклюзив. Этого фото нет в интернете, потому что это мое личное фото. На заставке мобильного смотрится просто отлично.

          • )) Очень приятно, спасибо!

  • Создание Сайтов

    библиотеку jQuery, а также плагин prefixfree (чтобы не писать для свойств браузерные префиксы*/ — это как понимать?

    • Верхнее меню при нажатии на кнопку показывается-скрывается с помощью jQuery скрипта. Чтобы работали методы, которые используются в скрипте, нужно подключить библиотеку jQuery к веб-странице.
      Плагин prefixfree автоматически добавляет к названию css3-свойств соответствующие браузерные префиксы для поддержки этих свойств во всех браузерах. Поэтому можно писать свойства без префиксов. Плагин определяет версию браузера пользователя и если она не поддерживает какое-то свойство, автоматически добавит префикс.

  • OlegPotapovrus

    Некоторые «специалисты» еще не освоили кроссбраузерную верстку, а вы тут про адаптивную верстку сайтов…

    • Создание Сайтов

      Адаптивная верстка в правильном ее понимании — это способ решить отдельные проблемы, если есть какой-то коммерческий интерес. Если это какой-то учебный сайт или блог, то смысла нет в такой адаптивной верстке. И уж если владелец сайта работает на адсенс, то там еще сложней с их блоками. Тупо делать адаптивный сайт для пользователей от декстопов до моторолы 325px — не вижу смысла.

  • Создание Сайтов

    Попробовал поставить это меню на вордпресс и что-то не понял, почему оно не работает. Короче отказался и сделал на css. Даже лучше получилось в том плане, что не перекрывает экран.

  • Дмитрий Морозов

    Доброго времени суток! Очень полезный материал, ровно как и сайт. У меня возникла проблема с кнопкой меню, которая появляется при ширине 768px — при клике на кнопку меню ничего не происходит. jQuery подключил, не могу разобраться в проблеме.

    • Здравствуйте. Вероятно, у вас свои названия класса кнопки и /или идентификатора меню.

      • Дмитрий Морозов

        Добрый день. Код полностью взял из этого поста, ничего не изменял. Также добавил в папку с исходниками файлы: jquery, prefixfree, watch — результат такой же. Браузеры: Firefox, Chrome — результат одинаковый, кнопка меню не работает. Есть ли еще какие-нибудь идеи? Спасибо.

        • Я предполагаю, что вы два раза добавили скрипт: один раз скопировали вместе с разметкой, а после, когда дошли до конца урока, добавили его ещё один раз.

          • Дмитрий Морозов

            Вы верно предположили, спасибо!

          • Пожалуйста))

  • Roman Zelenkov

    Материал хороший, спасибо )) Но есть одно замечание:
    Проверил страницу из примера гугловским сервисом:

    https://testmysite.withgoogle.com/intl/ru-ru (сорри за ссылку). Адаптивность для мобильного 100% отлично, но вот просмотр на мобильных 45% (плохо) и на стационарных 61% (плохо). Главная ошибка это подключение скриптов вначале страницы и не оптимизированные изображения (но это ладно, не важно). Все же лучше избегать этих скриптов и пойти другим путем.

    • Знаете, на днях тестировала гугловские рекомендации, так вот даже если у вас в head есть только одна ссылка на файл .js или .css вместо 5-10, которые вы уже удалили/перенесли, результат теста от этого не изменится. Также предлагаю скачать оптимизированные по мнению гугла картинки и посмотреть, что это вообще. Все скрипты в подвал — сомнительная рекомендация и практически не осуществимая для большинства сайтов.
      А теперь предлагаю ознакомиться с результатами теста другого сервиса. https://uploads.disquscdn.com/images/77c5b25300a0f558011a4491cf92540f80c89a81d78d13165de8df4519a3152d.png

  • Lukum

    Добавил еще три пункта меню-стало их Шесть! Но в мобильной кнопочке показываются только эти ТРИ что в шаблоне — как ее заставить подтянуть новые пункты?
    в сайте 6 пунктов а в мобильном три пункта:)

    • Не видя кода, сложно определить ошибку. Попробуйте кэш браузера почистить или нажмите ctrl+F5.

  • Lukum

    Блог
    Портфолио
    Об авторе
    Про меня
    Про Вас

    В исходный код просто добавил пару строк — на сайте они есть — а через кнопочку на маленьких экранах только первые три -новые пункты не появляются
    кеш точно не причем ..

  • Lukum

    Супер нашел! спасибо вам ! Тогда еще момент :
    как мы можем сделать это моб меню -чтоб при открытии оно не наезжало собой на фоновый рисунок или текст, а отталкивало его (ну чтоб эта весна отъехала вниз)

  • Александр Тимощенко

    как отключить анимацию для адаптивных версий сайта?
    а то без анимации все супер, а как включаю — все поехало)
    по логике что то на подобии
    animates:none;
    или присвоить ид скрипту, и писать через скрипт ид и то что выше?
    Извините, не искал, возможно решение под рукой. просто выключил все и решил с телефона проверить, а оно криво)
    Это решение чисто логически что напросилось.

    • Александр Тимощенко

      Нашел вот такое вот решение.

      {
      if (screen.width > 480) document.write (»);
      }

      А попроще ?

      • Речь идет об анимации с помощью скрипта?

        • Александр Тимощенко

          Именно. Пока до ГУРУ анимации на чистом css не дошел ))))

          • Тогда вам надо через настройки плагина отключать анимацию.

          • Александр Тимощенко

            Не, видимо не поняли друг друга. Сайт на html только.
            Есть ли команда в css отключающая скрипт, прописанный в html, для определенных устройств (разрешение)? Я вроде нашел то что скинул, а ещё варианты?

          • На почту скиньте архив сайта, посмотрю позже

  • Александр Тимощенко

    извините, вопрос решился — старые куки были в хроме. стало все ок.
    но актуален вопрос, для саморазвития, чувствую пригодится)

  • evg1401

    Здравствуйте! А разве меню не должно находится внутри .nav-toggle, если его функция его скрывать при таком-то условии?..
    Не очень хорошо понимаю как пустой класс может скрыть элементы в него не входящие, кроме пустого ((

    • Не должно, при клике на кнопку меню выполняется функция, которая может делать всё что угодно с любым элементом на странице.

  • Max Lemar

    Здравствуйте.
    Если можно вопрос по фиксированному меню. Есть header c шириной и высотой 100%.
    Под ним следующее идет меню. Фиксируется сверху при скроле с помощью скрипта(скрипт фиксирует меню при сроле header на его высоту). Работает, но как только уменьшить или увеличить окно браузера по высоте меняется положение фиксации. Те меню фиксируется раньше или позже чем header проскролился. В чем может быть проблема?
    Спасибо.