Question

我有一个小游戏的页面，我设计的UI用于分辨率为1280x800（或左右）的视口。我想在不同大小的屏幕上保持这种外观，允许页面占据视口宽度的100％并相应地调整高度。实际上，就像在图像编辑器中使用时一样调整整个页面的大小。

最初，我通过将<body>标记中的所有元素与<div id = "wrapper">包围并设置width:100%;来解决此问题，但此页面的元素数设置为position:absolute;这意味着虽然页面的其余部分已相应调整大小，但这些元素仍然存在。这样做的结果是不会改变某些元素的大小，这些元素的大小设置在px而不是%或ems。

<body>
    <div id = 'wrapper'>
        <content></content>
    </div>
</body>

#wrapper {
    width:100%;
}

我的下一个方法是将页面完全嵌入到另一个页面中，并使用<iframe>元素并在div中包含但<iframe>的内容只是溢出溢出，你将不得不滚动查看页面。

<body>
    <div id = 'wrapper'>
        <iframe src = 'game.html' width = '1280' height = '800'></iframe>
    </div>
</body>

#wrapper {
    width:100%;
}

我怎样才能做到这一点？理想情况下只使用CSS和HTML，但我不介意那么多。

Answer 1

假设我已正确理解问题，您可以使用百分比padding-top创建一个比率框。对于一些不同的场景，它是一种有用的模式。

它起作用的原因是padding-top百分比值取自元素宽度而非高度的百分比。

这是一个简单的例子：

.wrapper {
  position: relative;
  width: 100%;
  padding-top:62.5%; /* 800/1280 */
}

.game {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  background: black;
}

.gameui_example {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background: red;
}

<div class="wrapper">
  <div class="game">
      <!-- game markup goes here -->
      <div class="gameui_example"></div>
  </div>    
</div>

请注意，如果视口高度小于1280x800比率，它不会处理任何事情。根据您希望它适应的程度，您可能需要使用一两个媒体查询。

将整个页面缩放到veiwport，同时保持纵横比

1 个答案: