How to become an author
Search
Profile
Pull to refresh

Comments 51

Тема «адаптивная вёрстка», а контент «css для чайников». Спасибо за статью, хочу ещё!
Total votes 52: ↑52 and ↓0 +52
Под заголовок, на мой взгляд, подходит только 4-ый пункт.
Total votes 5: ↑1 and ↓4 -3
Зря минусуете, человек дело говорит.

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

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

Статья интересная, но практически не имеет отношения к адаптивному дизайну. Для тех, кто хочет узнать, что это такое, лучше прочитать Как сделать один сайт для все устройств.
Total votes 1: ↑0 and ↓1 -1
Советую думать в этом направлении: float, mediaquery, bootstrap.
Total votes 4: ↑0 and ↓4 -4
Еще хотелось бы услышать о применении медиа блоков.
Total votes 1: ↑1 and ↓0 +1
Первая демка стабильно роняет Chrome после пары изменений размеров:
Total votes 15: ↑9 and ↓6 +3
Windows 7 x64 + Chrome 19.0.1084.46 m
Никаких падений браузера у себя не обнаружил. Меняю размер, изменяя ширину Developer Tools (который привязан к правой части экрана).
Total votes 2: ↑2 and ↓0 +2
у меня только заголовок поинтереснее
This comment wasn’t rated yet 0
согласен. падает плагин Shockwave Flash x32
Total votes 1: ↑1 and ↓0 +1
Ubuntu 12.04 64-bit, никаких падений, всё очень стабильно. Изменял размер окна, HD-режим, всячески поизгалялся над страницей… ничего не упало)
This comment wasn’t rated yet 0
Топик оформлен как перевод и ссылка указана рядом с ником автора.
Total votes 5: ↑3 and ↓2 +1
На мой взгляд стоит привыкнуть к редизайну хабра и начать отличать статьи от переводов, ок?
Total votes 8: ↑6 and ↓2 +4
Прощу прощенья, не могу привыкнуть в новому дизайну.
Total votes 5: ↑4 and ↓1 +3
Спасибо за пост, но хочется чего-нибудь более изящного.
This comment wasn’t rated yet 0
Это, конечно же, не адаптивная верстка, а обычная резина.
Total votes 3: ↑3 and ↓0 +3
UFO just landed and posted this here
Очевидно тем, что никакой адаптации верстки здесь нет.
Верстка в веб — это не статический скриншот, который «волшебным образом» растягивается, как это было бы в печатной верстке. Она изначально подразумевает разметку с параметрами стилизации. Относительные размеры — не адаптация, а только единицы измерения.
Адаптация, во-первых, учитывает разные устройства (media queries), а во-вторых, подразумевает какое-то изменение в стиле/разметке. Здесь — ни того, ни другого, а только ошибочное мнение автора о том, будто нестатичная верстка в веб значит адаптацию.
Total votes 1: ↑0 and ↓1 -1
UFO just landed and posted this here
Ох уж эти имхо. Я вам перечислил два условия адаптивности верстки для облегчения классификации. Резина может быть притянута за уши к адаптивной верстке, ровно как iframe remote scripting — к ajax.
Адаптация однозначно значит не то, что вы написали, и тем более не включает понятия (если это вообще понятия) красивости и пристойности. Адаптация значит изменение, приспособление к сложившимся условиям — откуда и вытекают два требования: изменение стиля/разметки, и учет условий — media queries. В резиновой верстке не стояло и не стоит цели адаптации — это просто способ обозначения размеров. То, что его можно приспособить под адаптацию — хорошо, но это не значит, что он становится адаптацией. Помимо этого, резина не учитывает сложившиеся условия, а также ничего не меняет.
Если вы хоть минимально дружны с логикой, вы сможете уловить это заключение.
Total votes 3: ↑2 and ↓1 +1
UFO just landed and posted this here
В этом вы правы, но что вы называете версткой? Внешний вид — да, меняется, он типа адаптивный, тексты рендерятся по-другому, блоки соскакивают, но внешний вид — это не верстка, это способ интерпретации верстки браузером. Это адаптивный дизайн. А верстка — то есть разметка (html-код) плюс стилизация (css-код) — не меняются!
Total votes 1: ↑1 and ↓0 +1
UFO just landed and posted this here
UFO just landed and posted this here
Ну так-то да) Только это все-же отдельный механизм, а) учитывающий условия, б) меняющий CSS, который работает для рендеринга в текущий момент. Типа цифрового автомата, меняющего свое состояние в зависимости от условий media queries.
Total votes 1: ↑1 and ↓0 +1
UFO just landed and posted this here
Посмотрите на скриншот даже — там поменялось число картинок на мобильном экране. Такое не сделать без техники адаптивной верстки.
This comment wasn’t rated yet 0
UFO just landed and posted this here
Хотя не могли бы вы показать пример, как сделать, чтобы три элемента были по 33%, а два элемента — по 50%? Ну т.е. чтобы видимые элементы занимали всю отведенную им ширину?
This comment wasn’t rated yet 0
UFO just landed and posted this here
>> Как видно из скриншота, второй способ гораздо читабельнее:
Очень и очень индивидуально. К тому же причем тут % маржин?
This comment wasn’t rated yet 0
UFO just landed and posted this here
Кирилл, спасибо за пост.

Мы у себя практически все это используем. Первый «трюк» с видео вообще очень удобный.
А вот что касается именно сабжа, то мы подключаем сразу несколько разных css-стилей с атрибутами типа media=«screen and (max-width: 760px)», чем и реализуем адаптивность под разные ширины окон.
Total votes 2: ↑2 and ↓0 +2
UFO just landed and posted this here
UFO just landed and posted this here
Этот способ хорош, в том случае если элементы не вылетают из блока. Я думаю можно даже в пост добавить.
Total votes 1: ↑1 and ↓0 +1
<<<< Этот способ хорош, в том случае если элементы не вылетают из блока.
Не согласен. Если вы внимательно прочитали бы статью, то поняли бы, что при этом способе элементы могут смело вылезать из контейнера, не боясь быть обрезанными. Мало того этот метод решает сразу все проблемы, которые были в предыдущих clearfix'ах и иже с ними.

<<< Я думаю можно даже в пост добавить.
А вот тут полностью поддерживаю! Автор, добавьте этот пример обязательно!
Total votes 2: ↑2 and ↓0 +2
На самом деле я неправильно выразил мысль, я говорил про трюк с overflow:hidden.
This comment wasn’t rated yet 0
UFO just landed and posted this here
Думаю можно не добавить, а заменить. Так как альтернативный способ решает проблему лучше, чем overflow: hidden;
Total votes 3: ↑3 and ↓0 +3
UFO just landed and posted this here
Очень не хочется огорчать, но в FF 13.0 — блок не переносится
This comment wasn’t rated yet 0
Так же быстро нашлось и решение:
Блоки обернуть елементом с «float:left»
This comment wasn’t rated yet 0
UFO just landed and posted this here
Only those users with full accounts are able to leave comments. Log in, please.

Your account

Sections

Information

Services

Support Return to old version
© 2006–2023, Habr