JavaScript随着视口大小的缩小而增加div的百分比并随着它的增长而减少，是否可能？

Question

具有相对于视口大小的百分比非常简单，但我的情况正好相反。

只是在这里抛出一个数字如果视口是480px，我希望div的大小为100％但是当视口的大小增加时，我希望div的宽度缩小。假设一旦视口大约为1024px，div的宽度应为50％;

我猜测唯一的解决方案是使用JavaScript。我好几天都在摸不着头脑，似乎无法找到如何做到这一点的方法。有人可以帮忙吗？

Answer 1

我猜你可以通过css媒体查询来实现这个目标，如果你不需要让它不断变化。

例如：

@media all and (max-width: 480px) {
  div {
    width: 100%;
  }
}
@media all and (min-width: 481px) and (max-width: 1024px) {
  div {
    width: 50%;
  }
}

此代码使div对于视口等于或小于480px的宽度为100％，对于大小481-1024给出50％。你可以自己调整它。