javascript - 如何在不添加HTML的情况下完成rwd图片要求

Question

我有一个项目，其原始屏幕结构就像我附加的程序示例！

现在设计稿要求在移动设备上，原来的黄色块必须出现在绿色块的下方，但是我原来的 HTML 已经是这样排列的。感觉如果在移动设备上很难实现这样的画面，不知道如何在不添加HTML的情况下通过css来完成这样的画面变化？

.demo {
  display: flex;
  justify-content: space-between;
}
.demo .main {
  flex: 2;
  background-color: #FBD148;
}
.demo .main .article {
  background-color: #49FF00;
  height: 200px;
}
.demo .main .reply {
  background-color: #3DB2FF;
  height: 200px;
}
.demo .about {
  flex: 1;
  background-color: #FBFF00;
  height: 200px;
}

<div class="demo">
  <div class="main">
       <div class="article">article</div>
       <div class="reply">reply</div>
  </div>
  <div class="about">about</div>
</div>

标签： javascripthtmljquerycss

Answer 1

为了解决这个问题，更好的方法是display: grid在演示类和主类中使用。演示类将有两列和两行。在main will 中只有自动行。通过@media查询，我们在演示中重新定义了网格列和行，并将黄色元素放置在green和blue之间。

:root {
  --height: 200px;
}

.demo {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(2, var(--height));
}

.demo .main {
  display: grid;
  grid-auto-rows: var(--height);
  background-color: #fbd148;
}

.demo .main .article {
  background-color: #49ff00;
}

.demo .main .reply {
  background-color: #3db2ff;
}

.demo .about {
  background-color: #fbff00;
}

@media screen and (max-width: 768px) {
  .demo {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, var(--height));
  }
  .about {
    grid-column: 1;
    grid-row: 2;
  }
  .reply {
    grid-row: 3;
  }
}

<div class="demo">
  <div class="main">
    <div class="article">article</div>
    <div class="reply">reply</div>
  </div>
  <div class="about">about</div>
</div>