我的页面上有一个小游戏,该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,但我对此并不介意。

最佳答案

假设我已经正确理解了这个问题,则可以使用百分比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的比例,它将无法处理任何事情。根据您要适应的程度,可能需要使用一两个媒体查询。

10-07 19:21
查看更多