響應式尺寸不同的瓷磚盒

我有20個盒子，像是this

我想要做的響應與mediaqueries

@media screen and (max-width:960px) { 

} 

@media screen and (max-width: 783px) { 

} 

@media screen and (max-width: 524px) { 

}

但我不能在我的設計控制箱。 JSFiddle

看看[masonry]（http://masonry.desandro.com/）和這篇文章http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout – mplungjan

嘗試這樣的一些解決方案：

或嘗試添加特定的每個媒體查詢的每個框的寬度。

2013-12-16 16:30:37

它看起來像儘管@ Vlad-Mihai在第二種選擇方面走在了正確的軌道上，但不是每個街區都有明確的寬度，而是有兩類：寬闊和狹窄;併爲每個媒體查詢分配每個類的百分比寬度。 – RobD

我只是把這些代碼到CSS區，其出色的工作：

@media screen and (max-width:1500px) { 
    .block {width: 250px} 
} 

@media screen and (max-width: 700px) { 
    .block {width: 100px} 
}

2013-12-16 15:08:14 Toccamonium

如果只有寬度需要響應，您可以使用max-width和width百分比。像這樣：http://jsfiddle.net/bbwkc/3/

.block_main { 
    max-width:750px; 
    width: 75%; 
}

依此類推。

2013-12-16 16:37:32

回答