html - 当屏幕很小时，如何将 Div 堆叠在一起？

Question

有五个div。它们彼此相邻，但在移动设备上查看时会变得很奇怪。只有当屏幕尺寸不足以并排显示它们时，如何才能将这些 div 堆叠在一起？

#a,
#b,
#c,
#d,
#e {
  background-color: cyan;
  width: 300px;
  height: 500px;
  margin: 10px;
  border-radius: 5%;
}

#wee {
    display: flex;
}

<div id="wee">
  <div id="a">
    stuff
  </div>

  <div id="b">
    weeeeeee
  </div>

  <div id="c">
    i like turtles
  </div>

  <div id="d">
    i don't eat sunglasses.

  </div>

  <div id="e">
    cough cough
  </div>
</div>

div 都是彩色的，宽 300 像素，高 500 像素。

标签： htmlviewport

Answer 1

你可以使用这个：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

#a,
#b,
#c,
#d,
#e {
  background-color: cyan;
  width: 300px;
  height: 500px;
  margin: 10px;
  border-radius: 5%;
}

#wee {
  display: flex;
}

@media screen and (max-width: 900px) {
  #wee {
    flex-direction: column;
    margin: 10px;
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div id="wee">
  <div id="a">
    stuff
  </div>

  <div id="b">
    weeeeeee
  </div>

  <div id="c">
    i like turtles
  </div>

  <div id="d">
    i don't eat sunglasses.

  </div>

  <div id="e">
    cough cough
  </div>
</div>