将 CSS 百分比宽度指定为视口宽度的函数答案

【问题标题】：Specify CSS percentage width as a function of viewport width将 CSS 百分比宽度指定为视口宽度的函数
【发布时间】：2021-07-05 07:20:46
【问题描述】：

我的网页上有一些文本段落，我想将其格式化为占据页面宽度的一定百分比。我决定当页面为 800px 宽时，文本应占页面宽度的 80%，当页面为 1440px 宽时，文本应占页面宽度的 40%。然而，问题是我希望在不同宽度之间有一个平滑的过渡，这意味着在 1120 像素宽时，文本将占据页面宽度的 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)) + “%”
}

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

【问题讨论】：

如果您可以访问 Javascript，您的公式是什么？
所描述的行为似乎不寻常。如果我理解，结果宽度将是 800px * 80% = 640px、1120px * 60% = 672px、1440px * 40% = 576px。也就是说，随着页面宽度从 800 像素增加到 1440 像素，文本的宽度会变宽然后变窄。
@Loe 很好，我没有考虑到我的线性百分比函数乘以页面宽度会变成二次函数，这意味着最大宽度为 1040px 宽。为了得到线性像素输出，需要相应地调整公式。

标签： html css viewport-units css-calc

【解决方案1】：

您的要求可通过vw（视口宽度）和media queries 获得。

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; }
}

【讨论】：