Масштаб html для пропорционального изменения размера экрана для разрешения экрана

Question

У меня есть одностраничная игра, которую я создал с помощью html.

Я превратил флеш-игру в html (простые html-теги, а не холст). Вы можете увидеть ссылку для флеш-игры here

Мне нужно, чтобы макет всегда был на одном экране. Если вы измените размер флеш-версии, вы увидите, что я имею в виду. В настоящее время вы можете проверить мой код here.

Я попытался сделать это с помощью свойства zoom css, но это бесконечная работа для каждого пикселя разрешений.

ЛЮБАЯ идея, что является лучшим способом добиться пропорционального масштабирования по ширине/по высоте?

Спасибо.

Answer 1

положить его в <div style="width: 100%;height:100%;"> code you want to embed here </div>

ответить на ваш последующий вопрос:

<div style="width: 100%;height:100%;"> 
    <div style="width: 30%;height:30%;"> 
something else to resize 
    <div> 
</div> 

таким образом все будет 100% экран в 100% DIV и 30% от размера в 30 % div.

Answer 2

То, что вы пытаетесь сделать, это называется отзывчивый веб-дизайн (вы можете Google, что)

в основном то, что вы делаете это сделать медиазапросы и изменить CSS на основе размера экрана

пример:

@media (max-width: 625px) { 

your code here 

} 

, что это будет сделать, это выполнить CSS, только если экран меньше, чем 625px