Пользователь
0,0
рейтинг
2 апреля 2012 в 07:15

Разработка → Переводим в код 5 действительно полезных шаблонов адаптивной разметки

Приветствую всех.

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

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

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

От слов к делу


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

image

Что мы имеем:

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;
		}


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

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

Заметки


Почему использовал 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/

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


Раз, два, три, четыре, пять.
Все проверялось в браузерах Chrome 17.0.963.83 m, Firefox 11.0, Opera 11.62, Safari 5.1.4, IE 9. Все под Windows 7. И на паре мобильных устройств.

UPD shimdim подсказывает, что для айфонов надо применять min-device-width и max-device-width.
Код будет выглядеть так:

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

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


Спасибо за внимание.
@Softlink
карма
76,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (24)

  • +1
    Спасибо. Пригодится!
  • 0
    Вот думаю, адаптация вёрстки для IE6 — это ссылка на гугльхром?
    А автору респект и уважуха. Больше вёрсток адаптивных и разных.
    • НЛО прилетело и опубликовало эту надпись здесь
    • +2
      Для IE6 можно верстать спокойно полноэкранную версию имхо. Думаю, найдется не много извращенцев, сужающих окно IE6 или пытающихся запустить его на мобиле, например. А media-queries оставить для меньших разрешений и тех кто их поддерживает.
      • 0
        Я скорее об интересной интерпритации стилей в ИЕ6. И о том, стоит ли овчинка выделки.
  • 0
    А можно взять что-нибудь типа foundation.zurb.com/ :)
    • +7
      Да, можно. Причем, этом не один такой единственный фреймворк. Задача моего поста и поста buddah, показать, что media queries использовать совсем не страшно(и даже интересно). Их надо уже применять. Ведь доля мобильных браузеров растет. Допустим, об ИЕ7, у которого доля в районе 3-5% мы и заказчики почему-то заботимся, а об Opera Mini, перепрыгнувшей рубеж в 10% мы благополучно забываем.
    • 0
      Всего два состояния — не катит! Посмотрите на их же пример. При ресайзе превьюшки превращаются в обои для рабочего стола, этого не должно быть как логически, так и практически (изображение растягивается более чем в три раза!!!). На многих таблетках и смартфонах (при горизонтальном просмотре) такой сайт будет смотреться крайне уныло.
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Более того, верстка должна быть продуманна и для ламповых телевизоров!
      А, если серьезно, то с помощью адаптивной верстки, можно сделать мобильную версию сменой всего одного класса!
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Я для старых осликов просто прописываю min-width равный, по старинке, 960 пикселям, или в районе того, согласно макета.
  • +1
    Все конечно здорово, но на примере шаблонов, ссылка номер 4, как смотрится меню в четыре пункта, если там написать текст (Главная, Услуги, Портфолио, Контакты) и посмотреть на экранах 320х480, 480х800. Тест просто не входит, придется как-то решать эту проблему.
    • 0
      Для меньших разрешений пишем свой @media screen и смещаем все пункты меню друг под друга. Или делаем один пункт-выпадалку, в которую и заталкиваем их.
  • 0
    Автору Большое Спасибо! Я как человек только косвенно работающий с вёрсткой, обязательно воспользуюсь примерами. Примеры выполнены очень аккуратно.
  • +1
    «Я не захотел высчитывать размеры для border-radius, поэтому круг будет квадратным...»
    Я не совсем понял, на сколько это ирония, но на всякий случай скажу, что border-radius:100% делает круг :)
    • НЛО прилетело и опубликовало эту надпись здесь
      • +1
        Ну, писать везде border-radius:64% — не круто, а 100% — отлично!
        • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Может для вас будет сюрпризом, но круг получается, если ширина равна высоте, в любом другом случае будет эллипс. Учитывая, что здесь и высота и ширина изменяются, то надо было обязательно их подогнать, чтобы они были равны. Понимаете?
      • 0
        Так подгонять нужно высоту к ширине, а не радиус. В любом случае, я написал это на всякий случай.
        Резина с тразнишэнами смотрится великолепно. * { transition: all… } сильно повлияет на скорость в крупных проэктах?
        • +1
          Наверное, я не очень правильно истолковал свою мысль в посте, но это и имелось ввиду:
          «Я не захотел высчитывать размеры для border-radius» = я не захотел подгонять высоту на разных @media screen. Ну да ладно.

          * { transition: all… } сильно повлияет на скорость в крупных проэктах?

          Честно говоря, я даже не пробовал применять такой селектор с таким транзишеном на каком-нибудь проекте. Насчет тормозов оно может и не сильно будет заметно, но дело в другом. transition: all будет менять абсолютно все свойства, которые может менять, а селектор "*" еще и разрешит ему это делать во всех блоках. Сооветственно, может всплыть неожиданно\не запланировано плавное изменение цвета текста или фона, или вообще какого-нибудь z-index. В общем, плавное изменение всего, что меняет свое значение.
        • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Веб-дизайнеры, вы же услышали, да?

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

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