SAPID INFO

Вариант создания адаптивного сайта

Перед Вами – структура, с которой мы будем работать в рамках данной публикации:

creation-of-an-adaptive-site-1

Код:

<div id="header">
 <!-- header -->
</div>
<div id="block-a">
 <div id="block-b">
  <div id="content">
   <!-- content -->
  </div>
  <div id="sidebar-right">
   <!-- sidebar_right -->
  </div>
 </div>
 <div id="sidebar-left">
  <!-- sidebar_left -->
 </div>
</div>
<div id="footer">
 <!-- footer -->
</div>

Значение используемых блоков:

  • header – шапка сайта
  • sidebar-left – левый столбец (навигация)
  • content – блок с контентом
  • sidebar-right- правый столбец (вывод случайных записей)
  • footer – нижняя часть сайта
  • block-a – div, позволяющий объединить сразу несколько блоков
  • block-b – div, позволяющий объединить сразу несколько блоков
  • mark-a – первая метка (к примеру для clear both)
  • mark-b – вторая метка (к примеру для clear both)

Размещение блоков сайта на разных устройствах

Широкоформатная версия:

creation-of-an-adaptive-site-1

Версия для ноутбуков (1):

creation-of-an-adaptive-site-2

Версия для ноутбуков (2):

creation-of-an-adaptive-site-4

Версия для планшетов (вертикальная ориентация) и мобильных:

creation-of-an-adaptive-site-3


Комментарии к статье
Allscar, Ноябрь 27, 2015 в 12:11 пп:

Помогите расположить блоки на планшете в такой последовательности:
header
content
left sidebar
right sidebar
footer

Добавьте свой комментарий - оставьте след в блоге!