增加百分比的div视口大小缩小和减少它随着它的增长，是可能的

Question

拥有一个相对于视口大小的百分比是非常简单和容易的，但我的场景是相反的。

只是在这里扔一个数字，我希望一个div是100%的大小，如果视口是480px，但当视口的大小增加，我希望div的宽度缩小。假设viewport在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的宽度100%的viewport等于或小于480px，并给它50%的大小481-1024。你可以自己调整