Просмотров: 7 625

Адаптированный под мобильные шаблон 2 колоночного сайта.

После того, как мы рассмотрели как можно сделать простейший одноколоночный макет адаптированный под мобильные устройства, давайте рассмотрим более сложный пример верстки 2 колоночного макета.

Добавим к исходному макету сайта боковую колонку.

HTML:

<div class="container">
     <h1>Шаблон двухколоночного макета страницы, адаптированного под мобильные устройства.</h1>
     <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque cum enim esse explicabo nihil, exercitationem illo itaque voluptatum rerum ducimus et facere aut, in tempora, error ipsa, aliquam provident doloribus!
 </p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque cum enim esse explicabo nihil, exercitationem illo itaque voluptatum rerum ducimus et facere aut, in tempora, error ipsa, aliquam provident doloribus!
     </p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque explicabo quis saepe consequatur quas officiis voluptas excepturi, id et mollitia ipsa eius dignissimos veritatis impedit possimus quo veniam placeat omnis!</p>
</div>
<div class="aside">
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque cum enim esse explicabo nihil, exercitationem illo itaque voluptatum rerum ducimus et facere aut, in tempora, error ipsa, aliquam provident doloribus!
 </p>
</div>

2016-02-29 14-57-49 Документ без названия - Internet Explorer

Как адаптировать подобный шаблон под мобильные устройства?

Смысл следующий: мобильные устройства имеют очень узкую ширину экрана и размещать по горизонтали несколько блоков не имеет смысла. Все равно они будут располагаться очень криво и будет появляться горизонтальная полоса прокрутки.

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

Давайте посмотрим, как этого можно добиться.

Шаг 1. Располагаем элементы по горизонтали для отображения на больших мониторах.

Для решения этой проблемы, добавляем на веб-страницу следующий код.

CSS:

     body{
         font-size: 16px;
         font-family: Candara, Trebuchet MS, Arial, Sans-serif;
     }
     .container{
         width: 64%;
         float: left;
         margin: 25px auto;
         background: #e3e3e3;
         padding: 15px;
     }
 .aside {
float: right;
padding: 3%;
margin-top:25px;
width: 24%;
background-color: #eee;
 }

По сути, мы размещаем две колонки рядом друг с другом с помощью свойства float.

Подробнее об этом здесь.

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

При определенном значении ширины окна браузера, правая колонка «выпадает» вниз и смотрится очень не хорошо.

Было бы намного лучше, если бы правая колонка «выпала» вниз и стала занимать большую часть экрана и левая колонка также заняла бы то оставшееся пространство, которое занимала правая колонка.

Давайте посмотрим, как это можно сделать.

Шаг 2. Адаптируем макет под мобильные устройства.

Добиться подобного эффекта позволяет правило CSS @media. Подробнее о нем разбиралось здесь.

@media all and (max-width : 768px) {
.container {
width: 94%;
padding: 3%;
}
.aside {
width: 94%;
padding: 3%;        
}
}

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

Блоки, которые располагались в несколько колонок теперь подстраиваются под новую ширину экрана браузера и выстраиваются в столбик.