JavaScript随着视口大小的缩小而增加div的百分比，随着视口大小的增大而减少div的百分比，这可能吗？

拥有一个相对于视图端口大小的百分比是非常简单的，但我的情况正好相反

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

---

我猜唯一的解决方案是使用JavaScript。几天来我一直在挠头，似乎找不到一个方法来做这件事。有人能帮忙吗？

我想，如果不需要不断更改css媒体查询，您可以通过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%的宽度。您可以自行调整。

请提供您的html结构，并向我们展示您测试的内容。这就是我目前处理此问题的方式，包括一些媒体查询。我有大约10个媒体查询，调整这个div的宽度和绝对位置，它在移动导航开始之前与导航重叠。我在寻找另一个更优雅的解决方案。我想应用一种更动态的方法，比如最大宽度：1024>50%，1014>51%，1000>52%……因此，当百分比变小时，增加百分比，与最高绝对位置相同。因此，您必须使用js。您可以绑定事件处理程序来调整事件的大小，例如使用jQuery:$（window）.resize（function（）{$（div）.css（'width'，function（）{return$（this.width（）-$（window.width（）/100}））；