Форум Сайтостроение Веб-строительство

Как правильно сверстать блоки для маленьких экранов?

zomorg
На сайте с 04.02.2009
Offline
168
zomorg
403

Собственно вопрос то скорее всего банальный.

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

на рисунке:

1) как выглядят блоки на обычном экране

2) как выглядят сейчас на мленьком экране

3) как хотелось бы.

Сейчас сверстано как во втором варианте, а как сделать, что бы было как в Варианте 3?

domen4you
На сайте с 08.03.2013
Offline
53
domen4you
#1

grid system

bootstrap?

infant
На сайте с 15.03.2008
Offline
170
infant
#2
domen4you:
bootstrap?

++

10 символов

psics
На сайте с 02.04.2009
Offline
130
psics
#3

@media (max-width: 600px){

/* и тут для контейнера уменьшаем ширину, а для chilren увеличиваем чтобы влазили ровно по ширине контейнера */

}

MX
На сайте с 17.06.2004
Offline
160
MGRLX
#4

width: 350px;

height: 100px;

float: left;

position: relative;

Всё. Блоки будут блоки набиваться в зависимости от ширины доступного места.

zomorg
На сайте с 04.02.2009
Offline
168
zomorg
#5

что то я понял, что слишком плохо шарю В этом... А можно пример верстки - если не затруднит...

Спасибо большое.

---------- Добавлено 22.01.2015 в 15:34 ----------

MGRLX:
width: 350px;
height: 100px;
float: left;
position: relative;

Всё. Блоки будут блоки набиваться в зависимости от ширины доступного места.

Вот - по моему - то, что надо!

mugukamil
На сайте с 05.11.2013
Offline
26
mugukamil
#6
zomorg:
что то я понял, что слишком плохо шарю В этом

Прекрасная возможность начать "шарить")): http://www.youtube.com/watch?v=WxDtaSYeU-k

S
На сайте с 23.05.2004
Offline
315
Stek
#7

http://arnaudleray.github.io/pocketgrid/ из базового.

Это просто подпись.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий