タスク：ブラウザウィンドウのサイズを変更するときに、ブロック要素の水平位置を直線的に変更します。
解決策： 「比例」という用語は、2つのパラメーターの線形依存性を意味します。 幾何学の学校のコースを思い出してください：線形関係は直線であり、その方程式は次のとおりです：Y =
a X +
b 。 線の方程式を作成するには、この線に属する2つの点の座標を知ることが必要かつ十分です。 Yにブロックの水平位置を、Xにウィンドウの幅をとると、タスクはパラメーター
aと
bを決定することになります。
したがって、ページレイアウトには最初の1000ピクセル幅、2番目の1600ピクセルの2つのオプションがあるとします。 最初のレイアウトでは、特定の青いブロックが100ピクセルの距離に配置されます。 ウィンドウの左端から、2番目-250ピクセル。 図を参照してください。
ブラウザウィンドウの幅に対するDIVの位置の線形依存性を構築する必要があります。 X1 = 100、X2 = 250-DIVの位置、およびY1 = 1000、Y2 = 1600-ウィンドウの幅とします。 少しグーグルでA4シートをいくつか台無しにして、学校のコースを思い出し、
aと
bの値を見つけるための公式を導き出しました。
a =（X2-X1）/（Y2-Y1）=（250-100）/（1600-1000）= 150/600 = 0.25
b = X1-a * Y1 = 100-0.25 * 1000 = -150
したがって、専用回線の式は次の形式になります。Y= 0.25 * X-150
これはどのように使用できますか？ 個人的に、私はこれを行います：絶対に配置されたDIVの場合、パーセンテージパラメーター左を
a * 100に設定し、マージン左オフセットを
bに設定します。 つまり、この例では、ブロックスタイルは次のようになります。
#mydiv {
width: 100px;
height: 100px;
background: blue;
/* */
position: absolute;
left: 25%; /* a, 100*/
margin-left: -150px; /* , */
top: 30px; /* */
}実際の例は、
e1.nnov.ru /
rezina.htmlにあります。
xlsファイルを
ダウンロードして、計算を容易にすることも
できます 。