So erzielen Sie beim Ändern der Fenstergröße einen Prozentsatz für einen reibungslosen Übergangsspielraum

Question

Ich möchte einen prozentualen Rand um das Element festlegen, der 5 % der Ansichtsfensterbreite beträgt, wenn das Ansichtsfenster kleiner ist, und 15 % der Ansichtsfensterbreite, wenn das Ansichtsfenster größer ist.

Ich kann Medienabfragen verwenden, um den Wert der Marge wie folgt umzuschalten:

.element {
    margin: 5%;
}

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

Allerdings würde ich mir einen fließenden Übergang zwischen den Prozentsätzen wünschen, wenn sich die Fenstergröße ändert, und keinen plötzlichen Sprung von einem Wert zum anderen.

Ich denke, so etwas könnte funktionieren:

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

Dies sollte sich theoretisch ändernde Margenwerte glätten, indem die Margen als Prozentsatz des Änderungsbetrags zwischen den Margen festgelegt werden.

Zum Beispiel, wenn das Ansichtsfenster kleiner ist: min-margin + [margin的变化量] * 0，当视口为中等大小时：min-margin + [margin的变化量] * 0.5，当视口较大时：min-margin + [margin的变化量] * 1

Aber das funktioniert eigentlich nicht, weil die Berechnungsfunktion Werte wie 10px / 20px nicht direkt als Dezimalzahlen zurückgibt, wie 0,5. Stattdessen werden 0,5 Pixel zurückgegeben. Und 15 % * 0,5 Pixel sind unangemessen und führen dazu, dass der Rand auf den Standardwert 0 zurückgesetzt wird.

Vielleicht gehe ich in die falsche Richtung. Jede Hilfe wäre sehr dankbar.

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。

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

/* 斜截式 */
.test3 { margin: 0 clamp(5%, 25vw - 80px, 15%) }
.test4 { margin: 0 calc(25vw - 80px) }

/* 仅为视觉效果 */
*      { box-sizing: border-box; outline: 1px dashed }
body   { margin: 0; text-align: center }
.test  { background-color: Linen }

<h3>点斜式</h3>
<div class="test test1">限制</div>
<div class="test test2">未限制</div>

<h3>斜截式</h3>
<div class="test test3">限制</div>
<div class="test test4">未限制</div>