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.