Question

我有一个div，我正在尝试逐渐扩大浏览器窗口的大小。也就是说，对于每增加50px的窗口，我希望div的宽度也增加50px。

由于宽度是增量，我不能用百分比来定义它。现在我正在使用媒体查询，但为了实现这一目标，我不得不编写大量类似的案例，并且在不同的浏览器中行为不一致。

我无法编辑JavaScript。有没有一种程序化的方法可以在纯CSS中做到这一点？

div {
  background-color: #f00;
  height: 100px;
}

@media (max-width: 1600px) {
  div {
    width: 800px;
  }
}

@media (max-width: 1550px) {
  div {
    width: 750px;
  }
}

/* ... */

@media (max-width: 800px) {
  div {
    width: 0;
  }
}

Answer 1

那里有一些好消息和一些坏消息。好消息是有一个mod运算符可以用来做增量大小：

width: calc(500px + (100% mod 50px) * 50px);

然而，坏消息是并非所有浏览器都完全支持这一点。从我在互联网上阅读的内容来看，internet explorer和firefox有点支持它，但即使使用-webkit前缀，我也无法使用safari / webkit。

编辑：在探索更多内容之后，mod used to be in the specification back in 2006但as of 2013 it's been dropped :(

如何使用浏览器窗口逐步调整div？

1 个答案: