html - 根据 ionic 网格中的屏幕尺寸/方向更改 div 堆叠布局

Question

我有类似这样的 html 结构:

<div class="row">
    <div class="col-sm-12 col-md-6 col-xl-3">
    </div>
    <div class="col-sm-12 col-md-6 col-xl-3">
    </div>
    <div class="col-sm-12 col-md-6 col-xl-3">
    </div>

    ...
</div>

应该在小屏幕上将一堆 div 堆叠在 1 列中，在中型屏幕上堆叠 2 列，在大屏幕上堆叠 4 列......

有人可以帮助我如何在 ionic 框架中做到这一点吗？

Answer 1

您的设计中有一些变量会影响此处的正确答案(例如，您希望垂直堆叠的 DIV 如何相互交互，以及您希望每个 DIV 的内容如何影响 DIV 高度)。但是，一般来说，这可以通过媒体查询响应各种宽度(我选择 2000、1000 和 700 作为断点)并更改 float div 的宽度来完成:

http://codepen.io/anon/pen/gPKEax

代码转储:

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

* {box-sizing: border-box;}

div {
  width: 100%;
  float: left;
}

div:nth-child(even) {
  background: red;
}

div:nth-child(odd) {
  background: green;
}

@media (max-width: 2000px) {
  div {
     width: 25%;
  }
}

@media (max-width: 1000px) {
  div {
     width: 50%;
  }
}

@media (max-width: 700px) {
  div {
     width: 100%;
  }
}