Задача: менять горизонтальное положение блочных элементов по линейной зависимости при изменении размера окна браузера.
Решение: термин «пропорциональность» подразумевает линейную зависимость двух параметров. Вспоминаем школьный курс геометрии: линейная зависимость — это прямая, её уравнение выглядит следующим образом: Y=aX+b. Для построения уравнения прямой необходимо и достаточно знать координаты двух точек, принадлежащих этой прямой. Если принять за Y горизонтальное положение блока, а за X — ширину окна, то задача сводится к определению параметров a и b.
Итак, предположим, что у нас есть два варианта макета странички, первый шириной 1000 пикс., второй — 1600 пикс. На первом макете некий синий блок размещён на расстоянии 100 пикс. от левого края окна, а на втором — на 250 пикс. См. рис.
Нужно построить линейную зависимость положения DIV-а от ширины окна браузера. Пусть X1=100, X2=250 — положения DIV, а Y1=1000, Y2=1600 — ширина окна. Немного погуглив и замарав пару листов А4, вспомнил школьный курс и вывел формулу для нахождения значений 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-а я задаю параметр left в процентах, равный a*100, и смещение margin-left, равное b. То есть в нашем примере стиль блока будет такой:
Работающий пример можно посмотреть тут: e1.nnov.ru/rezina.html
А ещё можно скачать xls-файл, облегчающий расчёты.
Решение: термин «пропорциональность» подразумевает линейную зависимость двух параметров. Вспоминаем школьный курс геометрии: линейная зависимость — это прямая, её уравнение выглядит следующим образом: Y=aX+b. Для построения уравнения прямой необходимо и достаточно знать координаты двух точек, принадлежащих этой прямой. Если принять за Y горизонтальное положение блока, а за X — ширину окна, то задача сводится к определению параметров a и b.
Итак, предположим, что у нас есть два варианта макета странички, первый шириной 1000 пикс., второй — 1600 пикс. На первом макете некий синий блок размещён на расстоянии 100 пикс. от левого края окна, а на втором — на 250 пикс. См. рис.
Нужно построить линейную зависимость положения DIV-а от ширины окна браузера. Пусть X1=100, X2=250 — положения DIV, а Y1=1000, Y2=1600 — ширина окна. Немного погуглив и замарав пару листов А4, вспомнил школьный курс и вывел формулу для нахождения значений 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-а я задаю параметр left в процентах, равный a*100, и смещение margin-left, равное 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-файл, облегчающий расчёты.
