Адаптивная вёрстка сайта на основе media-запросов с примером

С каждым годом увеличивается количество мобильного трафика. Результаты поиска в мобильной выдаче Google более привязаны к местонахождению пользователя, не исключено, что при ранжировании поисковик также будет учитывать и наличие мобильной версии либо адаптивный дизайн сайта.

Как по мне адаптивный дизайн является оптимальным вариантом как с точки зрения SEO оптимизации, так и удобства для пользователя.

Вчера выдался свободный день, так что решил немного разобраться с особенностями формирования адаптивной вёрстки. Чтобы закрепить прочитанную теорию сделал тестовую страничку. На дизайне особо не зацикливался, главной целью было создать страницу, вёрстка которой будет подстраиваться под разные девайсы и расширения экранов. В тоже время, чтоб пример был более наглядным, сделал страницу в виде рейтинга интернет магазинов подарков из партнёрской сети Admitad. Если дизайн немного доработать, на неё вполне можно попробовать лить трафик.

Для тестирования использовал сервис QuirkTools. Дополнительно по нему ничего расписывать не буду, там всё просто: вбиваете url Вашего сайта, а затем выбираете девайсы с нужными расширениями экранов.

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

<meta name="viewport" content="width=device-width, initial-scale=1">

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

В моём примере используется 3 правила @media, где задаются стили для устройств с расширением экрана от 176px, 533px и 800px.

@media screen and (min-width: 176px) and (max-width: 532px) {
  /* css стили */
}
@media screen and (min-width: 533px) and (max-width: 799px) {
 /* css стили */
}
@media screen and (min-width: 800px) {
 /* css стили */
}

Для устройств с разрешением экрана 800 и более пикселей будет отображаться полная версия сайта с правым сайдбаром.

@media screen and (min-width: 800px) {
#main {
    margin-right:10px;
    width:64%;
    float:left;
  }
#sidebar {
    width:29%;
    float:left;
}
}

где:
Свойство float:left; — выравнивает элемент по левому краю, все остальные элементы, обтекают его по правой стороне.
Свойство margin-right:10px; — устанавливает отступ справа от центрального блока.

Для устройств с разрешением экрана от 533 до 800 пикселей, центральная часть остаётся неизменной, правый сайдбар смещается вниз.

@media screen and (min-width: 533px) and (max-width: 799px) {
#main {
    width:93%;
}
#sidebar{
    margin-top:10px;
    width:93%;
}
}

где:
Свойство margin-top:10px; — устанавливает отступ сверху от центрального блока.
Свойство width:93%; — задаёт ширину блоков.

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

@media screen and (min-width: 176px) and (max-width: 532px) {
  h1, h2 {font-size: 12px;}
  #content {font-size: 12px;}
  #main {
    width:93%;
  }
  #sidebar{
    margin-top:10px;
    width:93%;
}
  .t_bg{
   display: none;
}
}

где:
Свойство display: none; — удаляет ячейки таблицы.
Свойство font-size: 12px; — задаёт размер шрифта.

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