Комментарии 51
Тема «адаптивная вёрстка», а контент «css для чайников». Спасибо за статью, хочу ещё!
Под заголовок, на мой взгляд, подходит только 4-ый пункт.
Зря минусуете, человек дело говорит.

Но адаптивный дизайн — это просто!

К сожалению, все совсем наоборот :-). На первом же более-менее сложном проекте выяснится столько нюансов, что вы серьезно задумаетесь, а нужен ли вам вообще адаптивный дизайн.

Статья интересная, но практически не имеет отношения к адаптивному дизайну. Для тех, кто хочет узнать, что это такое, лучше прочитать Как сделать один сайт для все устройств.
Еще хотелось бы услышать о применении медиа блоков.
Первая демка стабильно роняет Chrome после пары изменений размеров:
Windows 7 x64 + Chrome 19.0.1084.46 m
Никаких падений браузера у себя не обнаружил. Меняю размер, изменяя ширину Developer Tools (который привязан к правой части экрана).
Ubuntu 12.04 64-bit, никаких падений, всё очень стабильно. Изменял размер окна, HD-режим, всячески поизгалялся над страницей… ничего не упало)
Топик оформлен как перевод и ссылка указана рядом с ником автора.
На мой взгляд стоит привыкнуть к редизайну хабра и начать отличать статьи от переводов, ок?
НЛО прилетело и опубликовало эту надпись здесь
Очевидно тем, что никакой адаптации верстки здесь нет.
Верстка в веб — это не статический скриншот, который «волшебным образом» растягивается, как это было бы в печатной верстке. Она изначально подразумевает разметку с параметрами стилизации. Относительные размеры — не адаптация, а только единицы измерения.
Адаптация, во-первых, учитывает разные устройства (media queries), а во-вторых, подразумевает какое-то изменение в стиле/разметке. Здесь — ни того, ни другого, а только ошибочное мнение автора о том, будто нестатичная верстка в веб значит адаптацию.
НЛО прилетело и опубликовало эту надпись здесь
Ох уж эти имхо. Я вам перечислил два условия адаптивности верстки для облегчения классификации. Резина может быть притянута за уши к адаптивной верстке, ровно как iframe remote scripting — к ajax.
Адаптация однозначно значит не то, что вы написали, и тем более не включает понятия (если это вообще понятия) красивости и пристойности. Адаптация значит изменение, приспособление к сложившимся условиям — откуда и вытекают два требования: изменение стиля/разметки, и учет условий — media queries. В резиновой верстке не стояло и не стоит цели адаптации — это просто способ обозначения размеров. То, что его можно приспособить под адаптацию — хорошо, но это не значит, что он становится адаптацией. Помимо этого, резина не учитывает сложившиеся условия, а также ничего не меняет.
Если вы хоть минимально дружны с логикой, вы сможете уловить это заключение.
НЛО прилетело и опубликовало эту надпись здесь
В этом вы правы, но что вы называете версткой? Внешний вид — да, меняется, он типа адаптивный, тексты рендерятся по-другому, блоки соскакивают, но внешний вид — это не верстка, это способ интерпретации верстки браузером. Это адаптивный дизайн. А верстка — то есть разметка (html-код) плюс стилизация (css-код) — не меняются!
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Ну так-то да) Только это все-же отдельный механизм, а) учитывающий условия, б) меняющий CSS, который работает для рендеринга в текущий момент. Типа цифрового автомата, меняющего свое состояние в зависимости от условий media queries.
НЛО прилетело и опубликовало эту надпись здесь
Посмотрите на скриншот даже — там поменялось число картинок на мобильном экране. Такое не сделать без техники адаптивной верстки.
НЛО прилетело и опубликовало эту надпись здесь
Хотя не могли бы вы показать пример, как сделать, чтобы три элемента были по 33%, а два элемента — по 50%? Ну т.е. чтобы видимые элементы занимали всю отведенную им ширину?
НЛО прилетело и опубликовало эту надпись здесь
>> Как видно из скриншота, второй способ гораздо читабельнее:
Очень и очень индивидуально. К тому же причем тут % маржин?
НЛО прилетело и опубликовало эту надпись здесь
Кирилл, спасибо за пост.

Мы у себя практически все это используем. Первый «трюк» с видео вообще очень удобный.
А вот что касается именно сабжа, то мы подключаем сразу несколько разных css-стилей с атрибутами типа media=«screen and (max-width: 760px)», чем и реализуем адаптивность под разные ширины окон.
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Этот способ хорош, в том случае если элементы не вылетают из блока. Я думаю можно даже в пост добавить.
<<<< Этот способ хорош, в том случае если элементы не вылетают из блока.
Не согласен. Если вы внимательно прочитали бы статью, то поняли бы, что при этом способе элементы могут смело вылезать из контейнера, не боясь быть обрезанными. Мало того этот метод решает сразу все проблемы, которые были в предыдущих clearfix'ах и иже с ними.

<<< Я думаю можно даже в пост добавить.
А вот тут полностью поддерживаю! Автор, добавьте этот пример обязательно!
На самом деле я неправильно выразил мысль, я говорил про трюк с overflow:hidden.
НЛО прилетело и опубликовало эту надпись здесь
Думаю можно не добавить, а заменить. Так как альтернативный способ решает проблему лучше, чем overflow: hidden;
НЛО прилетело и опубликовало эту надпись здесь
Очень не хочется огорчать, но в FF 13.0 — блок не переносится
Так же быстро нашлось и решение:
Блоки обернуть елементом с «float:left»
НЛО прилетело и опубликовало эту надпись здесь
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.