當視窗較小時，我想在元素周圍設定一個百分比的邊距，佔視口寬度的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。
也許我走錯方向了。任何幫助將不勝感激。
跟進我的評論
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)。
點斜式的數學公式：
y - y1 = m(x - x1)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 }