缩放 html 以根据屏幕分辨率按比例调整大小答案

【问题标题】：Scale html to be proportinally resized per screen resolution缩放 html 以根据屏幕分辨率按比例调整大小
【发布时间】：2017-06-11 23:08:37
【问题描述】：

我有一个用 html 创建的单页游戏。

我将 Flash 游戏转换为 html（简单的 html 标签，而不是画布）。可以看flash游戏链接here

我需要让布局始终适合一个屏幕。如果您调整 Flash 版本的大小，您会明白我的意思。目前您可以查看我的代码here。

我尝试使用 css 缩放属性来做到这一点，但对于分辨率的每个像素来说，这是无休止的工作。

知道实现横向/纵向比例缩放的最佳方法是什么吗？

谢谢。

【问题讨论】：

【解决方案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% div 中的所有内容都将占屏幕的 100%，而 30% div 中的所有内容都将占屏幕的 30%。

【讨论】：

【解决方案2】：

你正在尝试做的是所谓的响应式网页设计（你可以用谷歌搜索）

基本上你所做的是进行媒体查询并根据屏幕大小更改 css

示例：

@media (max-width: 625px) {

your code here

}

这只会在屏幕小于 625px 时执行 css

【讨论】：