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

Question

我想知道是否有办法检测浏览器宽度。例如，如果你点击ctrl +或ctrl - 并且窗口缩放，有没有办法根据它设置css样式？ Box指的是一个完美的方框。所以对于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;
  }
}