CSS：随浏览器窗口大小递增地增加div宽度

Question

我有一个div，想要随着浏览器大小的变化进行间隔缩放。我可以使用js或jQuery轻松实现此操作，但我认为可能有一种仅限于CSS的解决方案。也许媒体查询是一种解决方案，但也许还有更简单的方法？

当窗口尺寸增加100px时，我希望将另外100px添加到我的div宽度上。我只想每次以100px增加div的宽度，因此使用百分比似乎不是一个选项。

- Don P

---

媒体查询是您的门票。为什么还要预订呢？ - isherwood

我认为这是可以的，只是不确定它是否针对更具体的内容 :) - Don P

Answer 1

@media all and (min-width: 100px) and (max-width: 200px) {
  div {
    width: 100px;
  }
}
@media all and (min-width: 200px) and (max-width: 300px) {
  div {
    width: 200px;
  }
}

等等，等等...

- James Coyle

---

这样做的话，我可能需要编写大约15个案例。有没有更加程序化的方法来完成这个任务？ - Don P