指定CSS百分比宽度作为视口宽度的函数

Question

我的网页上有一些文本段落，我想格式化它们，以占据页面宽度的一定百分比。我决定，当页面宽度为800px时，文本应占页面宽度的80%，当页面宽为1440px时，文字应占页面宽的40%。然而，问题是，我希望在不同宽度之间有一个平滑的过渡，这意味着在1120px宽的情况下，文本将占据页面宽度的60%。本质上，我想定义一个表达式，它将当前宽度作为像素值，对数值进行运算，然后将数值输出转换为某个百分比。有没有办法只在CSS中实现这一点？我知道使用Javascript是可能的，但我想在设计中使用更纯粹的CSS。

编辑：如果我要在JavaScript中实现这一点，我会使用类似于以下的东西：

window.onresize = () => {
let currentWidth = window.innerWidth
let newTextboxWidth = 130 - (currentWidth / 16)
textbox.style.width = Math.max(40, Math.min(newTextboxWidth, 80)) + “%”
}

这允许符合给定规范的值的平滑连续性，而不是在百分比值之间跳跃的解决方案。

Answer 1

您所要求的内容可通过vw(视口宽度(和媒体查询获得。

p { 
transition: width 0.4s ease-in-out;
width: 80vw; 
}
@media screen and (min-width: 1120px) {
p { width: 60vw; }
}
@media screen and (min-width: 1440px) {
p { width: 40vw; }
}