CSS:随着屏幕宽度变小，是否可以使 div 变宽？

Question

我想尝试将 div 宽度设置为屏幕大小的倒数，直到它达到最大值 100%，仅使用 CSS(请不要使用 JS)。
为了清楚起见，这里有一个例子:

如果屏幕尺寸为 500px 宽，则 div 宽度将为 100%

如果屏幕尺寸为 1000 像素宽，则 div 将为 50%

等等

我不想使用媒体查询，因为它的微观管理太多了，我希望有某种比例的 calc() 方式来做到这一点
到目前为止，我一直在使用 'vw' 尺寸按比例调整 div 宽度的大小，这很好用，但在这种情况下，我想尝试做相反的事情。
我希望有人想出一种神奇的方法来做到这一点？

Answer 1

您可以使用 calc(Xpx - Yvw) . Yvw当屏幕变大时会变大，使 div 变小，反之亦然。
这是一个基本示例:

.box {
  width:calc(750px - 50vw);
  min-width:50px; /* let's have a minimum boundary */
  max-width:100%; /* and a maximum boundary */
  margin:auto;
  height:50px;
  background:red;
}

<div class="box"></div>

但正如我所评论的，拥有一个固定大小的 div 也可以在视觉上完成这项工作

.box {
  width:500px;
  max-width:100%;
  margin:auto;
  height:50px;
  background:red;
}

<div class="box"></div>