Question

我提供了一个非常基本的代码段，其中包含一行flex项目，当viewport width小于768px时，该项目会折叠一列。如果您打开摘要页面，然后打开开发工具，则可以调整视口的大小，然后按预期进行。

但是，如果将视口设置为780px并放大一点（在Chrome上按住Shift键并单击并拖动），则该行不会像调整屏幕本身大小时那样塌陷为一列。是否可以通过琐碎的方式（例如HTML，CSS或JS）更改布局以响应用户启动的缩放？我知道如果在em中设置了缩放级别，则媒体查询会响应缩放，但这需要重新加载页面，这很麻烦，并且会导致非常糟糕的UX。

Here is a loom video showing what I mean。

.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>

媒体查询能否响应用户启动的缩放？

0 个答案: