我正在尝试为我将使用 iframe 嵌入的游戏创建一个非常简单的页面。
我希望响应能力与此页面完全相同：https://rajeevbasu.com/projects/wil3d/index.html
在上面的示例中，游戏和文本完美调整大小以始终适合屏幕的高度，当窗口变得非常小时，它只显示游戏（这是有道理的）
任何人都可以帮助我了解如何制作与上面的示例链接非常相似的东西吗？ 我的游戏将使用 iframe 嵌入，尺寸为 3:4。
我找到了很多展示如何处理宽度的示例，但没有一个关注高度。我一直在研究这个例子，但到目前为止还没有运气：
https://jsfiddle.net/mjgLcp9q/
<div class="responsive-video">
<div class="cta"></div>div>
<iframe width="420" height="315" src="https://www.youtube.com/embed/j1qtsLfZWWQ" frameborder="0" allowfullscreen></iframe>
</div>
.responsive-video {
position: relative;
padding-bottom: 56.25%; /*Set based on the videos aspect ratio. If the aspect ratio is 16:9 set
the padding bottom to 56.25%. If the video aspect ration is 4:3, set padding-bottom to 75% */
padding-top: 35px; /*Height of the youtube video header*/
height: 0; /* Not needed as the iframe derives the height from the padding bottom */
overflow: hidden; /*hides if any of the video escapes outside the container*/
}
.cta {
position: absolute;
width: 30px;
height: auto;
right: 0;
bottom: 0;
}
.responsive-video iframe {
width: 100%; /*make sure video takes up 100% of the width*/
height: 100%;/*make sure video takes up 100% of the height*/
position: absolute; /*required because container has a height of 0*/
left: 0; /* correct the positioning */
top: 0; /* correct the positioning */
}
以下是示例。
body {
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
iframe {
width: 100%;
height: 100%;
border: 0;
}
#text {
text-align: center;
padding: 20px;
}
/* Media query for smaller screens */
@media screen and (max-width: 600px) {
#text {
display: none; /* Hide the text on screens below 600px width */
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Iframe with Text</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<iframe src="https://www.example.com"></iframe>
<div id="text">
<p>Hello, world!</p>
</div>
</body>
</html>
为了使示例正常运行，您可能需要放大浏览器或手动更改窗口大小，以使窗口认为它是 600px 或以下。