如何编写复杂的响应式图像网格

Question

我遇到过这种台式机/平板电脑和移动设备的布局（见下图），我需要为客户完成，但我发现这是不可能的。我曾想过使用 flex grid，但我的客户希望它与 IE9 兼容，这阻止了我使用 flex 作为解决方案。

有没有我可以实现的不太重的框架，或者我可以在没有 css/3 的框架的情况下做到这一点吗？

任何建议和帮助将不胜感激，谢谢。

Answer 1

Masonry 和 Salvattore（支持 IE9+）是这些东西的已知代码库，并且有很多内置选项，我下面的示例没有，所以自己制作或使用现有的，取决于很多关于你想用它做什么。

可以通过添加脚本和/或以稍微不同的方式将各部分相互链接来使此版本更具响应性，但在此之前，需要更清楚地知道当屏幕空间缩小时布局应该如何操作。

position: absolute版本

html, body {margin: 0; height: 100%; }

.container {
  left: 0;
  top: 0;
  height:100%;
  max-height:100%;
  width:100%;
  position: absolute;
  box-sizing: border-box;
}

.header{
  background-color: teal;
  height:30%;
  position: relative;
  box-sizing: border-box;
  border: 3px solid white;
}

.wrapper {
  height:80%;
  position: relative;
  box-sizing: border-box;
  padding-bottom: 80%;
}

.section {
  position: absolute;
  box-sizing: border-box;
  border: 3px solid white;
}

.section.nr1 {
  background-color: green;
  left: 0;
  top: 0;
  height:66.6%;
  width:33.3%
}
.section.nr2 {
  background-color: purple;
  left: 33.3%;
  top: 0;
  height:33.3%;
  width:66.6%
}
.section.nr3 {
  background-color: orange;
  left: 33.3%;
  top: 33.3%;
  height:33.3%;
  width:33.3%
}
.section.nr4 {
  background-color: red;
  left: 0;
  top: 66.6%;
  height:33.3%;
  width:66.6%
}
.section.nr5 {
  background-color: gray;
  left: 66.6%;
  top: 33.3%;
  height:66.6%;
  width:33.3%
}

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

  .wrapper {
    padding-bottom: 20%;
  }
  .section.nr1,
  .section.nr2,
  .section.nr3,
  .section.nr4 {
    position: relative;
    left: auto;
    top: auto;
    height: 50%;
    width: 50%;
    float: left;
  }
  .section.nr5 {
    position: relative;
    left: auto;
    top: auto;
    height: 50%;
    width: 100%;
    float: left;
  }
}

<div class="container">
    <div class="header"></div>
    <div class="wrapper">
        <div class="section nr1"></div>
        <div class="section nr2"></div>
        <div class="section nr3"></div>
        <div class="section nr4"></div>
        <div class="section nr5"></div>
    </div>
</div>

如果您不想（或不能）使用脚本，旧的table 可以成为您的朋友，因为使用它很容易进行这种布局。但请注意，通常不应使用table 进行布局。

使用它的好处是它会随着内容的增长而增长，position: absolute 版本不会。

table 版本（仅显示 5 节布局）

html, body {margin: 0; height: 100% }

.tbl {
  border-collapse:collapse;
  border-spacing:0;
  width: 50vw;
  height: 50vw;
}

.tbl td {
  padding:10px 5px;
  border: 1px solid;
  box-sizing: border-box;
  vertical-align:top
}

.section.nr1 {
  background-color: green;
}
.section.nr2 {
  background-color: purple;
}
.section.nr3 {
  background-color: orange;
}
.section.nr4 {
  background-color: gray;
}
.section.nr5 {
  background-color: red;
}

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

  .tbl {
    width: 90vw;
    height: 90vw;
  }

  .section.nr1,
  .section.nr2,
  .section.nr3,
  .section.nr4 {
    position: relative;
    left: auto;
    top: auto;
    height: 30vw;
    width: 50%;
    float: left;
  }
  .section.nr5 {
    position: relative;
    left: auto;
    top: auto;
    height: 30vw;
    width: 100%;
    float: left;
  }
}

<table class="tbl">
  <tr>
    <td class="section nr1" rowspan="2"></td>
    <td class="section nr2" colspan="2"></td>
  </tr>
  <tr>
    <td class="section nr3"></td>
    <td class="section nr4" rowspan="2"></td>
  </tr>
  <tr>
    <td class="section nr5" colspan="2"></td>
  </tr>
</table>