如何实现平滑过渡边距百分比，当调整窗口大小时

Question

当视口较小时，我想在元素周围设置一个百分比的边距，占视口宽度的5%；当视口较大时，边距占视口宽度的15%。

我可以使用媒体查询来切换边距的数值，如下所示：

.element {
    margin: 5%;
}

@media (min-width: 800px) {
    .element {
        margin: 15%;
    }
}

然而，我希望在窗口大小改变时，百分比之间能够平滑过渡，而不是从一个值突变到另一个值。

我认为像这样的方法可能有效：

@media (min-width: 800px) {
    .image-grid {
        margin: 1em
            calc(
                (var(--max-margin) - var(--min-margin)) * ((100vw - 800px) / (1920 - 800) +
                    var(--min-margin))
            );
    }
}

这理论上应该通过将边距设置为边距之间变化量的百分比来平滑更改边距值。

例如，当视口较小时：min-margin + [margin的变化量] * 0，当视口为中等大小时：min-margin + [margin的变化量] * 0.5，当视口较大时：min-margin + [margin的变化量] * 1

但实际上并不起作用，因为calc函数不会将10px / 20px之类的值直接返回为小数，例如0.5。而是返回0.5像素。而15% * 0.5像素是不合理的，会导致边距回到默认值0。

也许我走错了方向。任何帮助将不胜感激。

Answer 1

跟进我的评论

• 在CSS的calc(..)中，您必须确保计算中的术语是合法的。在除法和乘法方面要特别细致！
• 您必须意识到使用百分比单位（%）将产生像素（px）的结果，任何视口大小单位（vh,vw,vmin,vmax）及其派生单位也是如此。

因此，您的第一个术语(var(--max-margin) - var(--min-margin))将产生像素单位，因为大小的%转换为像素结果。

由于第二个术语((100vw - 800px) / (1920 - 800) + var(--min-margin))也产生像素单位的值，您正在将像素与像素相乘。

不能将饼干与饼干相乘。

线性方程的点斜式y=mx+b是计算相对于当前视口大小的任何大小的完美选择。这就像在XY图上绘制一条线，使用低点和高点坐标为(x1,y1)和(x2,y2)。

• 低点（或坐标）=低视口大小下所需的边距大小=(x1,y1)
• 高点（或坐标）=高视口大小下所需的边距大小=(x2,y2)

点斜式的数学公式：y - y1 = m(x - x1)

• 使用低点(x1,y1)和高点(x2,y2)
• 使用代入的方程：y = y1 + (y2 − y1) / (x2 − x1) × (x − x1)

在您的情况下

对于低点，我们可以选择任何方便的视口大小，并使用5%来计算该大小的边距。我使用了400px的视口宽度，得到0.05 * 400 = 20。现在我们得到了低点(x1,y1)，值为(400,20)

高点很容易找到，因为您希望在宽度大于800px的视口上有15%的边距。由于0.15 * 800 = 120，高点(x2,y2)将为(800,120)

我们现在只需将值输入上述方程（带有适当的px转换）并简化：

• margin = 20 * 1px + (120 - 20) / (800 - 400) * (100vw - 400 * 1px)
• => margin = 20px + 100 / 400 * (100vw - 400px)
• => margin = 20px + 0.25 * (100vw - 400px)

您希望将最终结果限制在5%和15%之间，这将需要使用CSS的clamp函数，得到最终结果：

• clamp(5%, 20px + 0.25 * (100vw - 400px), 15%)

代码片段显示了限制和未限制版本的效果（请将浏览器全屏并调整大小以查看差异）。

顺便说一句，最终结果的斜截式（y = mx + b）是25vw - 80px。

雷雷 雷雷