javascript - 基于浏览器窗口的缩放控制媒体查询

Question

我想知道是否有检测浏览器宽度的方法。例如，如果您按 ctrl + 或 ctrl - 并且窗口缩放，是否有一种方法可以基于它来设置 css 样式？盒子指的是一个完美的方形盒子。因此，对于 100% 的浏览器，我想要一个包含 3 个框的布局，而 50% 的浏览器我想在屏幕上设置 6 个框的样式。这可能吗？

100% 浏览器宽度示例

盒子盒子盒子

示例 50% 浏览器宽度

盒子盒子盒子盒子盒子盒子盒子

Answer 1

该功能实际上已经内置到 CSS 媒体查询中。作为概念证明，在您的浏览器中使用这个 JSFiddle 进行放大。打开。

放大 50% 时，可以看到六个框，放大 100% 时，只有三个。请注意，此行为会因设备而异。

希望这对您有所帮助!

<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
<div class="box four"></div>
<div class="box five"></div>
<div class="box five"></div>

body {
  width: 100vw;
}

.box {
  width: 50px;
  height: 50px;
  background: #555;
  display: none;
}

@media only screen and (max-width:680px) {
 .box {
    display: inline-block;
  }
}

@media only screen and (min-width:681px) {
  .one, .two, .three {
    display: inline-block;
  }
}