jquery - CSS：随着浏览器窗口的大小逐渐增加div的宽度

Question

我有一个 div，我想根据浏览器的大小按比例缩放。我可以使用 js 或 jQuery 轻松做到这一点，但我认为只有 CSS 解决方案。也许媒体查询是一种解决方案，但也许有一个更简单的解决方案？

随着窗口大小增加 100 像素，我想在 div 的宽度上再增加 100 像素。我只想以 100px 的增量增加 div 的宽度，因此使用 % 似乎不是一个选项。

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;
  }
}

等等...