ウィンドウのサイズを変更するときにスムーズな遷移マージンの割合を実現する方法

Question

要素の周囲にマージンの割合を、ビューポートが小さい場合はビューポート幅の 5%、ビューポートが大きい場合はビューポート幅の 15% に設定したいと考えています。

メディア クエリを使用して、次のようにマージンの値を切り替えることができます:

リーリー

ただし、ウィンドウ サイズが変更されたときに、ある値から別の値に急激に変化するのではなく、パーセンテージ間のスムーズな移行が必要です。

次のようなものがうまくいくかもしれないと思います:

リーリー

これにより、マージンをマージン間の変化のパーセンテージに設定することで、理論的にはマージン値の変化が滑らかになるはずです。

たとえば、ビューポートが小さい場合: min-margin [マージンの変更] * 0、ビューポートが中サイズの場合: min-margin [マージンの変更] * 0.5、ビューポートが大きい場合: min-margin [マージン変更] * 1

しかし、calc 関数は 10px / 20px のような値を 0.5 などの小数として直接返さないため、実際には機能しません。代わりに、0.5 ピクセルを返します。また、15% * 0.5 ピクセルは不当であり、マージンがデフォルト値の 0 に戻ってしまいます。

もしかしたら、私は間違った方向に進んでいるかもしれません。ご協力をいただければ幸いです。

Answer 1

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

• 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です。 リーリー リーリー