动态地改变div的宽度，当门户变得更窄，只有CSS

Question

是否有基于css的方法(非javascript)使div变量相对于门户的宽度?当门户宽度大于1000px时，我希望div宽度约为门户宽度的50%，但随着门户的变窄，我希望div变宽，而不是变窄，所以我不能将div宽度设置为50%。例如，在宽度为700px时，我希望它是门户宽度的58%。

这可以用css calc()吗?我想避免为每个定义的门户宽度编写大量的媒体查询规则，而只是让它不断调整。

Answer 1

使用一些数学来找到公式。x = a*W + b，其中W为传送门宽度，x为元素宽度。

对于W=1000px，我们需要x=500px—>500px = a*1000px + b

对于W=700px，我们需要x=406px (0.58*700px)——>406px = a*700px + b

经过几次计算，我们将得到:a = 0.313和b = 187px

所以你使用calc(31.3% + 187px)，我们可以考虑使用max-width

.portal {
border: 1px solid red;
}
.portal div {
width: calc(31.3% + 187px);
max-width: min(500px,100%); /* not bigger than 500px and 100% of the portal width*/
height: 50px;
background: blue;
}

<div class="portal">
<div></div>
</div>

这个公式基本上是一个百分比+一个固定的宽度，固定的部分是使你的元素在百分比上变宽的部分，因为它是固定的。