Адаптивный дизайн с элементами фиксированной ширины - PullRequest
Новая
       17

Адаптивный дизайн с элементами фиксированной ширины

1 голос
/ 22 декабря 2011

Я разрабатываю макет, похожий на страницу со списком Comcast: http://xfinitytv.comcast.net/movies

Если вы измените размер окна, вы заметите, что часто бывает пустое пространство справа, когда не хватает места дляеще один плакат, чтобы быть там.Я хочу создать макет, в котором всегда идеально подходят плакаты (без пробела справа).

Проблема в том, что я не могу применить ширину в процентах к плакатам, они остаются на фиксированной ширине180px.Моя теория состояла в том, чтобы использовать поля в процентах и ​​медиазапросы, но есть и следующие недостатки: 1) постер не всегда придерживается права 2) я должен использовать слишком много медиазапросов.Это просто не правильно.

В идеале это будет работать так: если размер экрана находится между х и х, то в строке 8 постеров.Если размер экрана между x и x, в строке 7 плакатов .... и так далее, и так далее.И все пространство между плакатами будет равномерно распределено по полям.Таким образом, мы используем решение для поиска медиа-запросов для отображения x числа плакатов и jquery для расчета и распределения полей.Всегда будут подходящие плакаты, которые всегда будут заканчиваться в самой правой части экрана.

Есть идеи, как это сделать?Он должен работать при изменении размера окна браузера (не только при загрузке страницы).

1 Ответ

2 голосов
/ 19 мая 2012

Это действительно можно реализовать с помощью селекторов мультимедиа CSS3.

Допустим, одна колонна имеет ширину 100 пикселей, у вас есть боковая панель шириной 150 пикселей, а элементы обернуты в оболочку.

В идеале это должно быть реализовано с использованием LESS CSS или аналогичного. 

<div class="container">
    <div id="sidebar">SIDEBAR</div>

    <div id="wrapper">
        <div class="coloumn">ITEM</div>
        <div class="coloumn">ITEM</div>
        <div class="coloumn">ITEM</div>
        <div class="coloumn">ITEM</div>
        <div class="coloumn">ITEM</div>
        <div class="coloumn">ITEM</div>
    </div>
</div>

/*Default layout with 2 coloumns (150 + 2*100)*/
#sidebar
{
float:left;
width:150px;
}

#container
{
width:350px;
}

/*Coloumns outer width must be 100px*/
.coloumn
{
width:90px;
border:1px solid #000; /*Left + right = 2px*/
margin-left:8px;
background:#ccc;
display:inline;
}

#wrapper
{
margin-left:150px;
width:200px;
}

/*3 coloumns (150 + 3*100)*/
@media (min-width: 450px){
#wrapper
{
    width:300px;
}

#container
{
width:550px
}
}

/*4 coloumns (150 + 4*100)*/
@media (min-width: 550px){
#wrapper
{
    width:400px;
}

#container
{
width:550px
}
}
...