Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 51
Тема «адаптивная вёрстка», а контент «css для чайников». Спасибо за статью, хочу ещё!
Под заголовок, на мой взгляд, подходит только 4-ый пункт.
Зря минусуете, человек дело говорит.
Но адаптивный дизайн — это просто!
К сожалению, все совсем наоборот :-). На первом же более-менее сложном проекте выяснится столько нюансов, что вы серьезно задумаетесь, а нужен ли вам вообще адаптивный дизайн.
Статья интересная, но практически не имеет отношения к адаптивному дизайну. Для тех, кто хочет узнать, что это такое, лучше прочитать Как сделать один сайт для все устройств.
Но адаптивный дизайн — это просто!
К сожалению, все совсем наоборот :-). На первом же более-менее сложном проекте выяснится столько нюансов, что вы серьезно задумаетесь, а нужен ли вам вообще адаптивный дизайн.
Статья интересная, но практически не имеет отношения к адаптивному дизайну. Для тех, кто хочет узнать, что это такое, лучше прочитать Как сделать один сайт для все устройств.
Советую думать в этом направлении: float, mediaquery, bootstrap.
Еще хотелось бы услышать о применении медиа блоков.
Первая демка стабильно роняет Chrome после пары изменений размеров:
P.S. 18.0.1025.168 m
Windows 7 x64 + Chrome 19.0.1084.46 m
Никаких падений браузера у себя не обнаружил. Меняю размер, изменяя ширину Developer Tools (который привязан к правой части экрана).
Никаких падений браузера у себя не обнаружил. Меняю размер, изменяя ширину Developer Tools (который привязан к правой части экрана).
Наблюдаю ту же проблему
у меня только заголовок поинтереснее
согласен. падает плагин Shockwave Flash x32
Ubuntu 12.04 64-bit, никаких падений, всё очень стабильно. Изменял размер окна, HD-режим, всячески поизгалялся над страницей… ничего не упало)
На мой взгляд стоит указать ссылку на источник вашей статьи:
webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design
webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design
Прощу прощенья, не могу привыкнуть в новому дизайну.
Спасибо за пост, но хочется чего-нибудь более изящного.
Это, конечно же, не адаптивная верстка, а обычная резина.
Очевидно тем, что никакой адаптации верстки здесь нет.
Верстка в веб — это не статический скриншот, который «волшебным образом» растягивается, как это было бы в печатной верстке. Она изначально подразумевает разметку с параметрами стилизации. Относительные размеры — не адаптация, а только единицы измерения.
Адаптация, во-первых, учитывает разные устройства (media queries), а во-вторых, подразумевает какое-то изменение в стиле/разметке. Здесь — ни того, ни другого, а только ошибочное мнение автора о том, будто нестатичная верстка в веб значит адаптацию.
Верстка в веб — это не статический скриншот, который «волшебным образом» растягивается, как это было бы в печатной верстке. Она изначально подразумевает разметку с параметрами стилизации. Относительные размеры — не адаптация, а только единицы измерения.
Адаптация, во-первых, учитывает разные устройства (media queries), а во-вторых, подразумевает какое-то изменение в стиле/разметке. Здесь — ни того, ни другого, а только ошибочное мнение автора о том, будто нестатичная верстка в веб значит адаптацию.
Ох уж эти имхо. Я вам перечислил два условия адаптивности верстки для облегчения классификации. Резина может быть притянута за уши к адаптивной верстке, ровно как iframe remote scripting — к ajax.
Адаптация однозначно значит не то, что вы написали, и тем более не включает понятия (если это вообще понятия) красивости и пристойности. Адаптация значит изменение, приспособление к сложившимся условиям — откуда и вытекают два требования: изменение стиля/разметки, и учет условий — media queries. В резиновой верстке не стояло и не стоит цели адаптации — это просто способ обозначения размеров. То, что его можно приспособить под адаптацию — хорошо, но это не значит, что он становится адаптацией. Помимо этого, резина не учитывает сложившиеся условия, а также ничего не меняет.
Если вы хоть минимально дружны с логикой, вы сможете уловить это заключение.
Адаптация однозначно значит не то, что вы написали, и тем более не включает понятия (если это вообще понятия) красивости и пристойности. Адаптация значит изменение, приспособление к сложившимся условиям — откуда и вытекают два требования: изменение стиля/разметки, и учет условий — media queries. В резиновой верстке не стояло и не стоит цели адаптации — это просто способ обозначения размеров. То, что его можно приспособить под адаптацию — хорошо, но это не значит, что он становится адаптацией. Помимо этого, резина не учитывает сложившиеся условия, а также ничего не меняет.
Если вы хоть минимально дружны с логикой, вы сможете уловить это заключение.
Уж извините за резкость.
В этом вы правы, но что вы называете версткой? Внешний вид — да, меняется, он типа адаптивный, тексты рендерятся по-другому, блоки соскакивают, но внешний вид — это не верстка, это способ интерпретации верстки браузером. Это адаптивный дизайн. А верстка — то есть разметка (html-код) плюс стилизация (css-код) — не меняются!
Ну так-то да) Только это все-же отдельный механизм, а) учитывающий условия, б) меняющий CSS, который работает для рендеринга в текущий момент. Типа цифрового автомата, меняющего свое состояние в зависимости от условий media queries.
Посмотрите на скриншот даже — там поменялось число картинок на мобильном экране. Такое не сделать без техники адаптивной верстки.
>> Как видно из скриншота, второй способ гораздо читабельнее:
Очень и очень индивидуально. К тому же причем тут % маржин?
Очень и очень индивидуально. К тому же причем тут % маржин?
Кирилл, спасибо за пост.
Мы у себя практически все это используем. Первый «трюк» с видео вообще очень удобный.
А вот что касается именно сабжа, то мы подключаем сразу несколько разных css-стилей с атрибутами типа media=«screen and (max-width: 760px)», чем и реализуем адаптивность под разные ширины окон.
Мы у себя практически все это используем. Первый «трюк» с видео вообще очень удобный.
А вот что касается именно сабжа, то мы подключаем сразу несколько разных css-стилей с атрибутами типа media=«screen and (max-width: 760px)», чем и реализуем адаптивность под разные ширины окон.
Этот способ хорош, в том случае если элементы не вылетают из блока. Я думаю можно даже в пост добавить.
<<<< Этот способ хорош, в том случае если элементы не вылетают из блока.
Не согласен. Если вы внимательно прочитали бы статью, то поняли бы, что при этом способе элементы могут смело вылезать из контейнера, не боясь быть обрезанными. Мало того этот метод решает сразу все проблемы, которые были в предыдущих clearfix'ах и иже с ними.
<<< Я думаю можно даже в пост добавить.
А вот тут полностью поддерживаю! Автор, добавьте этот пример обязательно!
Не согласен. Если вы внимательно прочитали бы статью, то поняли бы, что при этом способе элементы могут смело вылезать из контейнера, не боясь быть обрезанными. Мало того этот метод решает сразу все проблемы, которые были в предыдущих clearfix'ах и иже с ними.
<<< Я думаю можно даже в пост добавить.
А вот тут полностью поддерживаю! Автор, добавьте этот пример обязательно!
Думаю можно не добавить, а заменить. Так как альтернативный способ решает проблему лучше, чем overflow: hidden;
Очень не хочется огорчать, но в FF 13.0 — блок не переносится
Где media queries?
Клип напомнил клипы группы Tool
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Самые простые техники адаптивной верстки