P粉5117495372023-09-13 17:24:14
私のコメントをフォローしてください
- 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です。
リーリー
リーリー
返事
0