Question

我想尝试将div宽度设置为屏幕尺寸的倒数，直到仅使用CSS（请不要使用JS）达到100％的最大值。

要清楚，这是一个示例：

如果屏幕尺寸为500像素，则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>

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

1 个答案: