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

Posted 2023-02-16

【中文标题】缩放 html 以根据屏幕分辨率按比例调整大小

【英文标题】：Scale html to be proportinally resized per screen resolution

【发布时间】：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%。

【讨论】：

是的，但是其他的呢？其余部分将如何按比例缩放@8487？

div 之间的所有内容都将缩放到屏幕大小，您可以在其中放置另一个 div 以调整其他部分的大小，例如 100% 屏幕的 30%：' 游戏嵌入代码 '

这不会是一项没完没了的工作，如果内容以@8487 的百分比适合其大小，我会检查每个像素？另外你在链接中看到的布局不是全角的，它有左右空格

【参考方案2】：

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

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

示例：

@media (max-width: 625px) 

your code here

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

【讨论】：

我知道这一点，但我目前遇到的问题与在一个屏幕宽度/高度上正确安装所有内容有关