html - 媒体查询可以响应用户发起的缩放吗？

Question

我已经包含了一个非常基本的片段，其中包括一行 flex 项目，当视口宽度小于 768 像素时，这些项目会折叠一列。如果您打开片段完整页面，然后打开开发工具，您可以调整视口大小并看到这按预期发生。

但是，如果您将视口设置为 780px 并稍微放大一点（在 Chrome 上按住 shift + 单击并拖动），则该行不会像调整屏幕本身大小时那样折叠成一列。是否可以更改布局以响应用户以微不足道的方式发起的缩放（即 HTML、CSS 和 JS）？如果缩放级别设置为，我知道媒体查询会响应缩放em，但这需要重新加载页面，这很麻烦并且会导致非常糟糕的用户体验。

这是一个显示我的意思的织机视频。

.flex-responsive {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .flex-responsive {
    flex-direction: column;
  }
}

<div class='flex-responsive'>
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
</div>

标签： htmlcssmedia-queries