Неактуально > Master-X.com

Свои работы не могу показать, работую над внутренними страницами сейчас одного адалтдейтингово сайта, (я там на постоянке).

А вот примеры с инета:
http://designmodo.com/responsive-design-examples/
Надо сужать окошко современного браузера, чтобы было видно как это работает, как всё перестраивается.

цитата
29/01/13 в 11:46

Mistic
Tekken писал:

Mistic:, tnx, оценил. А ты пользовался ими? Отзывы есть?

да )))

цитата
29/01/13 в 14:46

hardy
Здравствуйте!
Мы делаем

Обращайтесь, покажем примеры, обсудим. Контакты в подписи.

цитата
29/01/13 в 19:40

Tekken
Parfumer писал:

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

Parfumer: посмотри например http://www.brutalinvasion.com ? как адаптивную версстку такого сайта сделать?

цитата
29/01/13 в 19:44

Tekken
hardy:

Спасибо, посмотрю. Сразу подпись не заметил ;)

цитата
29/01/13 в 20:02

Parfumer
Tekken писал:

Parfumer: посмотри например http://www.brutalinvasion.com ? как адаптивную версстку такого сайта сделать?

Ну также как и любой другой. Используются медиа-запросы CSS3, с помощью которых задается стиль для разных ширин браузера (устройства). Допустим у тебя есть две колонки и три колонки. Для узких экранов они перестраиваются в одну колонку. (Как вариант для планшета три колонки можно перестроить в 2 + 1 колонки). Как колонки перестраиваются? Допустим речь идёт о трех колонках. Делаются три плавающих дива по 33%. Как окно сужается, задаем ширину этим колонкам 100%, поэтому им ничего не остается как (они же плавающие) стать один под другим. Также используется гибкие изображения (растягиваются при изменении размеров экрана). Ну вот так в двух словах.

цитата
29/01/13 в 20:07

Tekken
Parfumer писал:

Parfumer: Ага, спасибо. Я спрашиваю, потому что не понял, как адаптировать без ресайза картинки, если у меня изображение бывает во всю ширину экрана, например 800 пикселей. Или например, блок с эпизодом для десктопной версии содержит 5-7 изображений и наверное выводить их на экран телефона бессмысленно.

цитата
29/01/13 в 20:32

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

цитата
30/01/13 в 09:56

Parfumer
В Книге Итана Маркотта «Отзывчивый веб-дизайн» всё написано.

Как сделать гибкие картинки? Их надо обязательно засунуть в какой-то ограничивающий блок, ну пусть тот же див шириной 33%. Блоку задать стиль overflow:hidden. Поместить туда картинку, которая даже немного больше и задать стиль для картинок img {max-width:100%}. Вот и всё.

Но есть такой момент, что на мобильнике интернет медленный и картинка большая будет долго грузится. Тогда может быть надо для мобильных экранов скрыть большую картинку и показать маленькую картинку при помощи display:block, display:hidden.

цитата
30/01/13 в 10:11

X-dream
спалил тему +1

цитата
30/01/13 в 16:12

hardy
Parfumer писал:

... при помощи display:block, display:hidden.

да, все верно, обычно таким подходом и пользуются. только display:hidden нету свойства. правильно display:none.
ну и для ликбеза все возможные значения display - http://htmlbook.ru/css/display (хотя к этой теме это и не относится

цитата
30/01/13 в 17:02

Parfumer
hardy писал:

верно, просто ошибся.

цитата
01/02/13 в 07:26

Tekken
Всем спасибо за отзывы.

цитата
01/02/13 в 10:23

Alex Prototype
http://www.dejurka.ru/web-design/24-rwd-tools/
читаем, применяем

цитата
01/02/13 в 11:09

Yacc
http://fluidbaselinegrid.com
http://twitter.github.com/bootstrap

Берём и пользуемся.

цитата
04/02/13 в 21:55

Tekken
Спасибо гайс. Давно не брал я в руки шашки

Новая тема Ответить

Эта страница в полной версии