私のコメントをフォローしてください

• CSS のcalc(..)では、計算の項が正当であることを確認する必要があります。割り算と掛け算には特に注意してください。
• パーセント単位 (%) を使用すると、ビューポート サイズ単位 (vh、vw、vmin、vmax #) の結果がピクセル単位 (px) で生成されることを認識する必要があります。 ##) とその派生ユニットも同様です。

したがって、最初の項

(var(--max-margin) - var(--min-margin))は、サイズ%## のため、ピクセル単位を生成します #Convertピクセル結果に。2 番目の項

((100vw - 800px) / (1920 - 800) var(--min-margin))

もピクセル単位で値を生成するため、ピクセルごとに乗算することになります。Cookie を Cookie で増やすことはできません。

線形方程式の

点-勾配形式

y=mx bは、現在のビューポート サイズに対する任意のサイズを計算するのに最適です。これは、最低点と最高点の座標を(x1,y1)および(x2,y2)として使用して、XY チャート上に線を描くのと似ています。

低点 (または座標) = 低いビューポート サイズで必要なマージン サイズ =

(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が得られました。これで、値(400,20)を持つ最小値(x1,y1)が得られます。ビューポートのマージンは

800px

より広く、15%が必要なので、最高点を見つけるのは簡単です。0.15 * 800 = 120であるため、最高点(x2,y2)は(800,120)になります。ここでは、上記の式に値を入力するだけで (適切な

px

変換を使用して)、次のように簡略化します。

マージン = 20 * 1px (120 - 20) / (800 - 400) * (100vw - 400 * 1px)

• =>margin = 20px 100 / 400 * (100vw - 400px)
• =>マージン = 20px 0.25 * (100vw - 400px)
• 最終結果を
5%

から

15%の間に制限したいと考えています。最終結果を取得するには、CSS のclamp関数を使用する必要があります。:

クランプ(5%, 20px 0.25 * (100vw - 400px), 15%)##

• #コード スニペット
制限付きバージョンと制限なしバージョンの効果を示します (違いを確認するには、ブラウザーを全画面にしてサイズを変更してください)。

ちなみに、最終結果の

傾き切片形式

(y = mx b)は、25vw - 80pxです。リーリー リーリー