要素の周囲にマージンの割合を、ビューポートが小さい場合はビューポート幅の 5%、ビューポートが大きい場合はビューポート幅の 15% に設定したいと考えています。
メディア クエリを使用して、次のようにマージンの値を切り替えることができます:
リーリーただし、ウィンドウ サイズが変更されたときに、ある値から別の値に急激に変化するのではなく、パーセンテージ間のスムーズな移行が必要です。
次のようなものがうまくいくかもしれないと思います:
リーリーこれにより、マージンをマージン間の変化のパーセンテージに設定することで、理論的にはマージン値の変化が滑らかになるはずです。
たとえば、ビューポートが小さい場合: min-margin [マージンの変更] * 0、ビューポートが中サイズの場合: min-margin [マージンの変更] * 0.5、ビューポートが大きい場合: min-margin [マージン変更] * 1
しかし、calc 関数は 10px / 20px のような値を 0.5 などの小数として直接返さないため、実際には機能しません。代わりに、0.5 ピクセルを返します。また、15% * 0.5 ピクセルは不当であり、マージンがデフォルト値の 0 に戻ってしまいます。
もしかしたら、私は間違った方向に進んでいるかもしれません。ご協力をいただければ幸いです。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
私のコメントをフォローしてください
- CSS の
- パーセント単位 (
したがって、最初の項calc(..)では、計算の項が正当であることを確認する必要があります。割り算と掛け算には特に注意してください。%) を使用すると、ビューポート サイズ単位 (vh、vw、vmin、vmax #) の結果がピクセル単位 (px) で生成されることを認識する必要があります。 ##) とその派生ユニットも同様です。(var(--max-margin) - var(--min-margin))
((100vw - 800px) / (1920 - 800) var(--min-margin))は、サイズ%## のため、ピクセル単位を生成します #Convertピクセル結果に。もピクセル単位で値を生成するため、ピクセルごとに乗算することになります。
線形方程式の
点-勾配形式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%を使用してそのサイズのマージンを計算できます。ビューポート幅
800px400pxを使用したところ、0.05 * 400 = 20が得られました。これで、値(400,20)を持つ最小値 (x1,y1) が得られます。 ビューポートのマージンはより広く、
px15%が必要なので、最高点を見つけるのは簡単です。0.15 * 800 = 120であるため、最高点(x2,y2)は (800,120) になります。 ここでは、上記の式に値を入力するだけで (適切な変換を使用して)、次のように簡略化します。
マージン = 20 * 1px (120 - 20) / (800 - 400) * (100vw - 400 * 1px)-
-
-
5%
から=>margin = 20px 100 / 400 * (100vw - 400px)=>マージン = 20px 0.25 * (100vw - 400px)15%
クランプ(5%, 20px 0.25 * (100vw - 400px), 15%)##の間に制限したいと考えています。最終結果を取得するには、CSS のclamp関数を使用する必要があります。:#コード スニペットちなみに、最終結果の
傾き切片形式(y = mx b)は、25vw - 80pxです。