Для начала разберемся в терминах.

Респонсив, от англ. responsive — отзывчивый, то есть отзывается на смену ширины экрана, зависит от этой ширины.

Адаптивный — от англ. adaptive — примерно то же самое, то есть макет адаптируется к ширине экрана.

Разница в том, что респонсивный — это, по-просту говоря, резиновый, тянется как резина туда-сюда.

А адаптивный — это когда меняется не только ширина блоков, но и их расположение. Это, конечно же, самый главный тренд в развитии веб-дизайна последние лет пять. Самый известный фреймворк для быстрой работы с адаптивностью — Bootstrap. Его мы будем изучать позже.

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

При любом повороте в прямом и переносном сымсле сайт должен выглядеть отлично.

Начнем с того, что проще — с резины, то есть — респонсивности.

В прошлом уроке HTML-старт, переходим с таблиц на дивы вы собрали макет не таблицами, а дивами.

Скачайте его архив здесь.

В данный момент наш макет не резиновый — он имеет ширины в пикселях.

Начнем с глобальной ширины. Я хочу, чтобы макет был на 100% ширины экрана.

Весь блок целиком состоит из двух дивов. Второй содержит все остальные. Если у меня общая желаемая ширина 100%, то каждому из двух основных дивов нужно присвоить ширину по 50% (вместо указанных 600px).

Обновим страницу, получим такой вот результат:

Зеленый фон принадлежит диву d2, тому, что содержит все более мелкие. Такие поля появились от того, что внутренним дивам тоже нужна дать ширины в процентах.

Полный цсс выглядит так:

.d1{
width: 50%;
background: #ccc;
height: 800px;
float: left;
}
.d2{
width: 50%;
background: #0cc;
height: 800px;
float: left;
}
.d3{
width: 50%;
background: #f0c;
height: 100px;
float: left;
}
.d3_2{
background: violet;
float: left;
}
.d4{
width: 100%;
background: #f00;
height: 100px;
clear: both;
}
.d5{
width: 50%;
background: #5f1;
height: 600px;
float: left;
}
.d6{
width: 50%;
background: #a40;
height: 300px;
float: left;
}
.d6_2{
background: palevioletred;
}

Сейчас, если вы нажмете Inspect макет в Хроме и начнете ресайзить влево-вправо — то увидите, что макет тянется как резина, вплоть до размеров мобильного телефона.

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

После того, как вы нажали на макет правой кнопкой мыши и выбрали в диалоговом окне Inspect, у вас появляется панель — сбоку или снизу, где вы видите код хтмл и цсс. Там же сверху есть иконка:

Нажмите на нее.

У меня по умолчанию открлось в режиме iPhone 6. У вас может быть какой-то другой режим.

Для начала разберемся — почему страница выглядит как на десктопе, почему дивы не адаптировались к ширине и просто не сжались, так же, как при физическом ресайзе? Потому что нам нужно указать в хедере макета, как браузер должен вести себя в случае открытия сайта на мобильном устройстве.

Вот эта строчка:

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

Она указывает: ширина = ширине устройства, изменение масштаба = 1 (то есть масштаб один к одному, сайт не меняется в размерах при открытии на моб.)

Вставим эту строчку прямо над <title>…</title>, сохраним и обновим страницу — ура, все получилось:

Разбираемся дальше, вот здесь у вас список доступных устройств:

Если нажать на Edit, то откроется панель, где вы сможете добавить другие устройтсва в список быстрого доступа.

Ну и, наконец, если нажать на иконку Rotate, то можно быстро поменять портретный режим на ландшафтный, проще говоря — повернуть телефон или планшет:

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

Что для этого нужно знать.

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

Основной сложностью в стародавние времена было заставить вести себя так же картинки. Сейчас есть просто CSS-свойство

img{

max-width: 100%;

}

Оно означает — максимальная ширина картинки равна ее физической ширине, если картинка должна занимать меньшее пространство, то она ресайзится под ширину выделенного ей места.

Это свойство пригодится вам для картинки во втором — правом диве. Картинка, стоящая в первом диве, должна все-же иметь определенную ширину (как на макете), а текст должен обтекать ее справа, занимая столько места, сколько ему остается.