如何创建基于屏幕高度而非宽度的响应式页面？

嘿，我完全懂你的需求——要做一个嵌入3:4比例游戏的页面，让游戏和文本始终跟着屏幕高度缩放，窗口缩到很小的时候就只显示游戏对吧？之前你试了基于宽度的响应式方案但没搞定高度适配，我来帮你调整下思路和代码~

首先得明确，你之前用的padding-bottom方案是基于宽度的百分比缩放，这也是为啥它只适配宽度而不是高度。现在我们要换个思路，用vh（视口高度单位）来做核心基准，因为1vh就等于屏幕高度的1%，完美契合你的需求。

话不多说，直接上可运行的代码方案：

HTML结构 #

<div class="game-container">
  <div class="game-intro">这里放你需要展示的游戏说明文本</div>
  <iframe src="你的游戏嵌入地址" frameborder="0" class="game-iframe"></iframe>
</div>

CSS样式 #

/* 先重置默认样式，确保页面全屏无多余边距和滚动 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.game-container {
  position: relative;
  height: 100vh; /* 容器高度直接等于屏幕高度 */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem; /* 文本和游戏之间的间距 */
}

.game-iframe {
  /* 3:4比例计算：宽度 = 高度 × 0.75 */
  height: 85vh; /* 预留部分空间给文本，可根据需求调整 */
  width: calc(85vh * 0.75);
  max-width: 100%; /* 防止游戏宽度超出屏幕，避免横向滚动条 */
  border: none;
}

.game-intro {
  /* 文本大小随屏幕高度缩放，保证可读性 */
  font-size: calc(1rem + 0.4vh);
  text-align: center;
  padding: 0 1rem;
}

/* 当屏幕宽度不足以容纳游戏的计算宽度时，隐藏文本，让游戏占满屏幕 */
@media (max-width: calc(85vh * 0.75)) {
  .game-intro {
    display: none;
  }
  .game-iframe {
    height: 100vh;
    width: calc(100vh * 0.75);
  }
}

关键逻辑说明 #

• 用vh做高度基准：所有核心元素的高度都基于vh设置，确保不管屏幕怎么变，元素始终适配当前屏幕高度
• 固定3:4比例：通过calc(高度 × 0.75)计算游戏宽度，完美保持你需要的3:4比例，不会变形
• 自适应文本显示：媒体查询判断屏幕宽度是否足够，不够的话自动隐藏文本，只保留游戏，符合你说的“窗口小的时候只显示游戏”的需求
• 文本缩放：文本大小用calc结合vh单位，跟着屏幕高度一起缩放，不会出现文本过大或过小的问题

这个方案完全抛弃了基于宽度的百分比逻辑，转而以高度为核心，正好匹配你的需求。你可以根据自己的实际情况调整85vh这个数值，比如想要游戏占满更多高度就调大，想要留更多空间给文本就调小~

备注：内容来源于stack exchange，提问作者hellofromlondon