如何使flexbox在移动设备中响应？

Question

检测到窗口的宽度后，如何使此flexbox变为可移动的，以便在列方向上全部响应？并使文本的字体大小也变得自适应？

这是我的css onlt，用于创建一些网格项：

.do-flex {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.do-flex  > div {
  max-width: 200px;
  background: #e0ddd5;
  margin: 2%;
}

我们应该为此使用max-width吗？

Answer 1

使用媒体查询进行响应式设计：

@media only screen and (max-device-width: 480px) {
  flex-direction: column;
  font-size: whatever font-size you want
}

然后在媒体查询中调整所需的任何值。

https://www.w3schools.com/css/css_rwd_mediaqueries.asp