Flexbox 媒体查询问题答案

【问题标题】：Flexbox media query issueFlexbox 媒体查询问题
【发布时间】：2022-01-15 23:00:49
【问题描述】：

我有一个非常简单的两列布局，我正在尝试使其具有响应性，但媒体查询一直被击败。

<div class="flex-container">
  <div class="flex-item-left is-mobile">1</div>
  <div class="flex-item-right is-mobile">2</div>
</div>

这是 CSS：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  font-size: 30px;
  text-align: center;
}

.flex-item-left {
  background-color: #f1f1f1;
  padding: 10px;
  flex: 50%;
}

.flex-item-right {
  background-color: dodgerblue;
  padding: 10px;
  flex: 50%;
}

/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media screen and (max-width: 800px) {
  .flex-item-right.is-mobile, .flex-item-left.is-mobile {
    flex: 100% !important;
  }
}

这里有 CSS 的特殊性吗？奇怪的是它适用于屏幕调整大小，但不适用于实际的移动设备。

【问题讨论】：

标签： html css flexbox responsive-design

【解决方案1】：

所以我必须回答我自己的问题，这样才能对其他人有所帮助。问题是我没有为移动设备设置viewport，并且页面在非移动视口模式下呈现。来自不同的帖子：

您需要将视口元标记设置为 content="width=device-width, initial-scale=1"。这告诉浏览器渲染设备屏幕宽度的页面。所以如果那个屏幕是 320px 宽，浏览器窗口将是 320px 宽，而不是缩放方式并显示 960 像素（或该设备默认执行的任何操作）。

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

【讨论】：

看起来如果您不添加width=device-width 的视口设置，它将默认为980px，这对于我上面的媒体查询不适用来说肯定更高！

【解决方案2】：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row">
    <div class="col-lg-6 col-12 bg-danger">
      1 of 2
    </div>
    <div class="col-lg-6 col-12 bg-primary">
      2 of 2
    </div>
  </div>

我建议您使用引导程序。有不同的响应模式

https://getbootstrap.com/docs/4.0/layout/grid/

【讨论】：

【解决方案3】：

width: 100%

用于 flex-item-left 和 flex-item-right

或者这个：

@media (max-width: 800px) {
    .flex-container {
        flex-direction: column;
    }
}

【讨论】：