Изменить размер всех элементов страницы пропорционально размеру окна
Пишу покерный клиент. Сечас стол открывается в новом окне фиксированого размера. Есть ли возможность написать функцию onwindowresize() так, чтоб там перебирались все элементы в документе.
тоесть при онлоад мы сохраняем все отношения ширины окна к высоте и ширине всех элементов. а потом при ресайз устонавливаем все широты и высоты и положение пропорционально новому размеру окна. Елементов много, и в процессе разроботки они добавляются/убавляются. Есть ли возможность перебрать их все чтоб не вручную описывать каждый? |
Цитата:
Порой достаточно сделать резиновую верстку. Если этого мало: - нужным элементам дать специальный класс - пробежаться по тем элементам и вычислить их размеры |
Table.Init = function (){ //Рисуем сукно d=document.createElement('div'); d.id='sukno'; d.style.position='absolute'; d.style.left='140px'; d.style.top='110px'; d.style.width='480px'; d.style.height='280px'; d.style.borderRadius='240px/140px'; d.style.background='rgb(1,157,90)'; document.getElementById("bacground").appendChild(d); for(var seat=0; seat<9; seat++){ d=document.createElement('div'); d.style.position='absolute'; d.id='player_bet_'+seat; d.style.left=[200,110,30,100,130,280,360,360,300][seat]+'px'; d.style.top=[210,190,100,40,20,20,80,120,190][seat]+'px'; d.style.width='70px'; d.style.height='20px'; d.style.color = 'white'; d.style.textAlign = 'center'; document.getElementById('sukno').appendChild(d); } } Все эти цифры актуальны для размера окна 816х535 Хотолось бы чтото типа Размер_дива = обьект{height, width}; Размеры_дивов = массив_обьектов типа Размер_дива; OnInit = function(){ for (для всех div в документе){ Размеры_дивов.push(div_height, div_width); } } OnResize = function(){ for (для всех div в документе){ div_height = Размеры_дивов[i].height*текущая_высота_окна/535; div_width = Размеры_дивов[i].width*текущая_ширина_окна/816; } } ну ещё+ позиция х и у и радиус скругления, но то уже детали. |
В стилях переключаются секции для того или иного размера дивайса через @media
http://www.w3schools.com/css/css_mediatypes.asp |
Часовой пояс GMT +3, время: 10:27. |