По умолчаниюСветлая версия
↑ перейти к списку статей

Адаптивная верстка в примерах

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

*Кто не хочет читать, ссылки внизу.

Сразу хочу сказать, что верстка адаптивных макетов требует несколько иного подхода, чем верстка статики. Мы сверстаем «неподвижный» макет и он будет работать, будет работать везде и при любых условиях. Однако, при переводе его в адаптивную верстку мы можем столкнуться с некоторыми проблемами. Такими как: размеры блоков и отступов, шрифты, в конце концов, созданная разметка не позволяет нам манипулировать блоками так, как того требует макет. Для создания отзывчивой верстки надо заранее обдумывать, все эти вопросы. Кстати, это же касается и веб-дизайнеров. Веб-дизайнеры, вы же услышали, да?

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

Что мы имеем:

1) Логотип;
2) Меню в правом верхнем углу;
3) Некий блок, состоящий из текста и картинки;
4) Три колонки, в каждой из которых есть свой контент;

За основу я везде взял общую обертку, шириной 80%, но не больше 960пк. Поделил все на 3 больших блока: top, main и content.
С логотипом проблем нет, разместили его вверху и пусть он там висит себе пожизненно.
А вот меню через float: right отправляем вправо, задав размер в 60% от общей ширины.
.item {
float: right;
width: 60%;
}

Пункты меню выстроим в ряд через float: left, не забыв задать им размер и отступы:
.list {
float: left;
width: 24%;
height: 50px;
margin: 0 0 0 1%;
}

*Т.к. я контент не забивал, то почти везде указываю высоту. В реальном проекте можно полагаться на количество контента

Текстовый блок делаем шириной в 50%:
.m-text {
float: left;
width: 50%;
font-size: 20px;
font-style: italic;
line-height: 1.5em;
}

А «картинку» через float: right отправил вправо, снабдив шириной в 40%, тем самым сделав запас в 10% между блоками.
.m-image {
float: right;
width: 40%;
min-height: 360px;
}

*Я не захотел высчитывать размеры для border-radius, поэтому круг будет квадратным ;)

Теперь делаем три колонки через все тот же float:
.c-block, .c-article, .c-comment {
float: left;
width: 30%;
}

Почему я почти везде использую float, напишу ниже.

В колонках размещаем контент обычными блоками. Думаю, тут вопросов нет.
Наш макет готов и начинаем трансформации.

Почти во всех шаблонах я использовал два вида размеров экрана: 600 и 800 пикселей, но никто не запрещает, хоть на каждый пиксель вешать нужное нам поведение.
Итак, при ширине в 800пк у нас останутся на местах логотип, меню, текстовый блок и картинка. Их не трогаем. Размеры у них резиновые, и при таком разрешении все останется вполне смотрибельным и читабельным. А вот блок с «баннерами» слева у нас принял горизонтальное положение, построив внутри себя все блоки в одну линию.
Для этого при размерах @media screen and (min-width: 600px) and (max-width: 800px)
Мы отменяем ему float и растягиваем на всю ширину:
.c-block {
float: none;
width: 100%;
margin: 0 0 30px 0;
overflow: hidden;
}

К блокам внутри наоборот, применяем float и задаем нужные размеры:
.b-list {
float: left;
width: 32%;
margin: 0 0 0 2%;
}
.b-list:first-child {
margin: 0;
}

Оставшиеся две колонки мы оставляем в вертикальном положении, лишь растягивая в половину общей ширины:
.c-article {
width: 48%;
margin: 0;
}
.c-comment {
width: 48%;
margin: 0 0 0 4%;
}

Получаем результат!

Следующая ширина у нас в 600 пикселей: @media screen and (max-width: 600px)
Здесь трансформаций становится на порядок больше.
Сначала смещаем меню под логотип, убирая у обоих float и разрешая растянуться ему во всю ширину(она ведь уже совсем не большая для 4-х пунктов).
.logo {
float: none;
}
.item {
float: none;
width: 100%;
margin: 30px 0 0;
}

Блок с текстом также растягиваем на всю ширину и как всегда убираем float:
.m-text {
float: none;
width: 100%;
margin: 0 0 40px 0;
}

А блок с картинкой отправляем «под него», отменяя float:
.m-image {
float: none;
width: 80%;
margin: 0 auto;
}

Ширину у картинки, как мы помним, выставили еще изначально, но здесь немного поправим ее, чтобы выглядело лучше.

Баннеры. Блок с баннерами вновь принял вертикальное положение, а сами картинки растягиваются на всю ширину. При этом писать для этого код нам абсолютно не нужно, т.к. они изначально стоят в нужном нам варианте.
А вот блоки со «статьями» и «комментариями» теперь становятся полноправными хозяевами всей ширины макета:
.c-article {
float: none;
width: 100%;
margin: 0 0 30px 0;
}
.c-comment {
float: none;
width: 100%;
margin: 0;
}

Таким образом, мы получили полностью вертикальную структуру страницы, и наш макет стал полностью адаптивным.

Внимание

Для iOS-устройств необходимо использовать вместо min-width — min-device-width. Итого, код будет выглядеть так:

@media only screen and (min-width: 480px) and (max-width: 768px),
only screen and (min-device-width: 480px) and (max-device-width: 768px) {
}

Вот и все хитрости. Ссылки на примеры всех макетов внизу. А пока…

Заметки.

Почему использовал float.

Сам я больше люблю инлайн-блоки. А как мы знаем, у инлайнов есть особенность учитывать в ширине пробелы между блоками. Мы даже знаем как с ними бороться. Но нам же надо убрать только пробелы, но не отступы между блоками, потому подавляющее большинство способов здесь отметается.
Остались в строю font-size: 0; и комментарии между блоками.

font-size: 0;

Все бы было хорошо в статике, раз отменили и забыли. А для Safari еще и display: table навесили. Но у нас «живой» макет, и очень часто в такой верстке применяются масштабируемые единицы измерения (em). Теперь цитата из поста от psywalker‘а:

«Из-за нулевого значения font-size у родителя, мы не можем применять масштабируемые единицы длины к потомкам, т.к. они отталкиваются от наследуемого размера шрифта и соответственно от нуля в нашем случае.»

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

Комментарии между блоками\физическое удаление пробелов между блоками.

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

Стили едины и они наследуются!

Как можно было заметить, мы кое-где вообще не указывали свойства для трансформаций макета, при этом все размещалось так, как нам и надо. Применялись исходные стили блоков.
Стоит понимать, что с помощью media queries мы не создаем принципиально новую версию сайта со своим CSS, а лишь изменяем или переопределяем уже написанные выше стили. Мы оперируем только заданными изначально классами. Здесь-то и зарыта собака. Как и написал во вступлении, адаптивная верстка требует иного подхода. Надо заранее продумать, как будет выглядеть наш сайт, что куда будет смещаться и как трансформироваться, какую писать разметку и какие использовать стили. Все это поможет впоследствии сократить количество кода при изменении структуры.

Разрешения и их количество.

С помощью media queries мы можем создать ну очень много трансформаций. Но, как правило, используют в основном типовые значения.

Мобильные:

240*320
320*480\240
480*800

Таблетки:

800*600\480
1024*768\600

ПК и ноутбуки:

От 1024 пикселей(совсем старые в расчет уже брать не будем).

Так вот для каждого из этих разрешений мы можем создать свое «поведение» разметки. При этом здесь надо помнить о наследовании свойств.
Например, здесь: @media screen and (min-width: 600px) and (max-width: 800px) мы указали сразу два значения. Таким образом, мы можем сделать трансформации, которые наилучшим образом впишутся в размеры экрана от 600 до 800 пикселей.
Если в данном случае не указать минимальный размер, то при написании стилей, например, для 320 пикселей, будут учитываться и стили, написанные для max-width: 800px, ведь 320 явно умещается в 800. Выхода здесь два:
1) Переопределять свойства для меньших разрешений(а зачем нам кучи лишнего кода?).
2) Использовать двойные значения в media queries. Таким образом, мы можем проводить точечные трансформации нашего макета для определенных размеров экрана.

Однако, указание всего одного параметра может быть оправдано. Например, когда нам на всех разрешениях нужно одно и то же положение блока\его размеры. Задаем один раз и забываем.

Красивости

Можно заметить, что при изменении размера окна браузера почти все трансформации происходят плавно. Это достигается путем добавления такого транзишена:
*{
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}

На самом деле это форменное безобразие, но я оставил только лишь для красоты. В реальном проекте не стоит так делать :)

На закуску

Сервисы, которыми я пользуюсь для просмотра в разных разрешениях(ну на всякий случай, может кому пригодится).
http://quirktools.com/
http://viewlike.us/

Примеры шаблонов.

Раздватричетырепять.

Кнопки для сайта

30 комментариев: Адаптивная верстка в примерах

  1. sergio говорит:

    Отличная статья, как раз нужно такую вёрстку делать.

  2. Марат говорит:

    Вот раньше было html+css и сайт готов. Теперь же еще таблетки и смарты.. «Не скучная» жизнь стала для веб верстальщика/дизайнера >_<

  3. Dasha говорит:

    Здесь можно быстро протестировать адаптивный дизайн сайта
    http://plastilin5.com/tools/

    • Alpatriott говорит:

      Dasha, спасибо за ссылку. Но только там нет 800пк по ширине, и совсем нет всего, что шире 1024. А адаптивный дизайн это ведь не только мобильные телефоны и планшеты. Доделаете?

    • Tata говорит:

      Dasha, ваш тестер не корректен: сайт тупо показывает в том виде, в котором он отображается браузером, но вписанный в маленькое окошко… но на устройствах вижу совершенно другое ;) «развод» грубо говоря….

      • Christik говорит:

        А разве не все инструменты по тестированию адаптивной верстки так работают? Может, подскажете тесты, где не только разрешение мобильных устройств эмитируют?

  4. X9 говорит:

    Супер статья, расписано просто и понятно! Как раз что-то подобное нужно делать в ближайшее время и я собирался искать информацию по этому поводу, и тут раз, случайно через хабру вышел на ваш блог и нашёл ещё целую кучу полезностей! :-) СПАСИБО!

  5. assert говорит:

    спасибо за статью!как раз только начал осваивать:) только не понял в данных шаблонах изображения векторные должны использоваться или обычные? и еще если для каждого diva хочу поставить фоновое изображение мне его надо векторным делать или нет?

    • assert говорит:

      тааак все предыдущий вопрос отпал(: но возник новый если я хочу для тега body установить в качестве backgroundа изображение как сделать так чтобы оно также масштабировалось?

  6. Евгений говорит:

    А почему интересно использовать транзишены для анимации подобной перестройки макета «форменное безобразие»? Ведь гугл на ютубе именно так и поступает.

    • Alpatriott говорит:

      Проблема в том, что транзишен с параметром all, в универсальном селекторе будет плавно изменять все, что он только может изменить, где надо и не надо. Цвета, координаты, фоны, z-index, прозрачность — все. И это надо иметь ввиду.

      • Евгений говорит:

        Ах, в этом смысле, здраво, я думал тут какой-то иной подвох :)

  7. Виталий говорит:

    Друзья, подскажите манагеру. делаем интернет-проект с нуля у студии — в смете 2 строки по верстке: верстка сайта и отдельно верстка адаптивной версии сайта.
    это правильно? Разве это не одна работа?

    • Alpatriott говорит:

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

  8. Stan говорит:

    По поводу указания особых свойство для iOs. Вы написали, «Для iOS-устройств необходимо использовать вместо min-width — min-device-width».
    Уточните, пожалуйста, актуальность этой информации.
    Дело в том,что я ограничился стандартным max-width и на iPhone 3gs все работает!

    Можно посмотреть на

  9. Сергей говорит:

    А какие преимущества и недостатку адаптивной и обычной вёрстки можете назвать? Имеет ли смысл делать на своём сайте адаптивную вёрстку?

    • Alpatriott говорит:

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

  10. Дмитрий говорит:

    «*Я не захотел высчитывать размеры для border-radius, поэтому круг будет квадратным…»

    чтобы квадрат стал круглым нужно border-radius задать 50%

    • Alpatriott говорит:

      При этом надо следить, чтобы высота всегда была равна ширине. В противном случае получится эллипс. Я не захотел подгонять высоту на разных @media screen.

  11. fagot говорит:

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

    • Alpatriott говорит:

      Не очень понял комментарий. Где и что слетает?

  12. Uchenik говорит:

    Огромное спасибо за статью. Без воды, одна полезность!

  13. Christik говорит:

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

    • Lutsk говорит:

      Я например 20% всегда добавлял. Но адаптивную делать не приходилось. Один раз попробовал сделать заказчику — он увидев начал возмущаться, что не соответствует макету. Пришлось переделывать верстку и назначать все размеры в пикселях. С тех пор инициативы не проявляю, — только если конкретное условие по адаптивности будет. Но все равно, не менее 20% накидывать буду по сравнению с фиксом.

    • Lutsk говорит:

      20% я имел тут ввиду за резину, а не адаптивную.

  14. Андрей говорит:

    В Гугл Хром и Сафари адаптивность не работает. Как поправить?

    • Alpatriott говорит:

      Что значит не работает? Все примеры нормально работают во всех браузерах, поддерживающих медиа запросы.

      • Андрей говорит:

        Откройте любой из ваших примеров шаблонов в Хроме и меняйте масштаб страницы. Если не верите, могу скришоты показать.
        Я использую один из ваших шаблонов на своем сайте. Сам сижу с Оперы и Мазиллы, в которых всё четко. Мне пожаловались на кривость сайта в Хроме. Проверил, @media не работают.