html 当调整窗口大小时，如何使边距在两个百分比之间平滑过渡

我希望在视口较小时，元素周围的百分比边距为视口宽度的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))
            );
    }
}

型
理论上，通过将边距值设置为边距之间变化量的百分比，可以平滑地更改边距值。
例如，当viewport很小时：min-margin + [change of margin] * 0，当viewport为中等大小时：min-margin + [change of margin] * 0.5，当viewport较大时：min-margin + [margin变化] * 1
但它没有，因为calc函数不返回像10px / 20px这样的直接小数。0.5。相反，它将返回0.5 px。15% * 0.5像素是不合逻辑的，会导致边距返回到默认值0。
也许我的方法不对。如果你能帮忙的话，我会很感激的。

我的评论

在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 viewport width，得到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%)
snippet显示了在钳制和非钳制版本上的效果（转到整页并调整浏览器大小以查看差异）。
BTW最终结果的 * 斜率截距形式 *（y = mx + b）为25vw - 80px。

/* point slope form */
.test1 { margin: 0 clamp(5%, 20px + 0.25 * (100vw - 400px), 15%) }
.test2 { margin: 0 calc(20px + 0.25 * (100vw - 400px)) }

/* slope intercept form */
.test3 { margin: 0 clamp(5%, 25vw - 80px, 15%) }
.test4 { margin: 0 calc(25vw - 80px) }

/* just eye-candy */
*      { box-sizing: border-box; outline: 1px dashed }
body   { margin: 0; text-align: center }
.test  { background-color: Linen }

个字符

html 当调整窗口大小时，如何使边距在两个百分比之间平滑过渡

1条答案

相关问题

热门标签

最新问答