我的页面上有一个小游戏,该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的比例,它将无法处理任何事情。根据您要适应的程度,可能需要使用一两个媒体查询。