不同尺寸的瓷砖盒响应

Question

我的响应式设计存在一些问题。

我有20个方框，例如this

我想用mediaqueries做响应

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

}

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

}

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

}

但我无法控制设计中的方框。 JSFiddle

Answer 1

尝试这样的解决方案：

• http://purecss.io/grids/
• http://semantic-ui.com/

或尝试为每个媒体查询的每个框添加特定宽度。

Answer 2

我只是将这些代码行放入CSS区域，并且效果非常好：

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

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

Answer 3

如果只需要响应宽度，您可以使用百分比max-width和width。像这样：http://jsfiddle.net/bbwkc/3/

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

等等。