如何让内容在不同屏幕尺寸下垂直适配？附代码示例

核心问题 #

1. 容器定位逻辑错误：给.container设置position: absolute+top:50%+transform: translateY(-50%)，同时搭配min-height:100vh——这会让容器本身高度占满视口，但向上偏移一半后，容器底部必然超出视口范围，导致下方内容被截断。
2. 按钮定位规则误用：绝对定位元素的margin-top/margin-left百分比是相对于包含块的宽度，不是高度！你用margin-top:95%这类值，实际是按容器宽度的95%计算，完全不符合垂直位置预期，导致按钮跑到容器外面。
3. CSS语法错误：.button7的选择器写成了button7（缺少.），导致样式不生效。
4. 媒体查询无效：(min-height:100%)条件无意义，百分比高度需要父元素有明确高度才能生效；固定padding:10px 20px在极端小屏会导致按钮尺寸失控。

修改后的代码 #

CSS部分

/* 重置默认边距，确保视口高度计算准确 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  min-height: 100vh;
  position: relative; /* 作为绝对定位按钮的参考容器 */
  overflow: auto; /* 按钮总高度超视口时，允许容器内部滚动 */
}

.button {
  background-color: #e7e7e7;
  position: absolute;
  border: none;
  color: black;
  padding: 2vw 3vw;
  text-align: center;
  font-size: 4vw;
  cursor: pointer;
  border-radius: 50%;
  /* 让按钮自身中心对准定位点，避免左上角偏移 */
  transform: translate(-50%, -50%);
}

.button1 { left: 50%; top: 45%; }
.button2 { left: 30%; top: 65%; }
.button3 { left: 80%; top: 50%; }
.button4 { left: 80%; top: 10%; }
.button5 { left: 10%; top: 10%; }
.button6 { left: 40%; top: 20%; }
.button7 { left: 10%; top: 45%; } /* 修复选择器 */
.button8 { left: 10%; top: 90%; }
.button9 { left: 70%; top: 75%; }
.button10 { left: 50%; top: 95%; }

/* 小屏适配优化 */
@media screen and (max-width: 600px) {
  .button {
    padding: 3vw 4vw; /* 用vw保持尺寸适配，避免固定值失控 */
    font-size: 5vw;
  }
}

HTML部分

<body>
  <div class="container">
    <button class="button button1" value="1">1</button>
    <button class="button button2" value="2">2</button>
    <button class="button button3" value="3">3</button>
    <button class="button button4" value="4">4</button>
    <button class="button button5" value="5">5</button>
    <button class="button button6" value="6">6</button>
    <button class="button button7" value="7">7</button>
    <button class="button button8" value="8">8</button>
    <button class="button button9" value="9">9</button>
    <button class="button button10" value="10">10</button>
  </div>
</body>

关键修改说明 #

• 容器定位：改用position: relative，去掉top:50%和transform，让容器正常占据视口高度，同时作为按钮的定位参考。
• 按钮定位：用left/top百分比替代margin，这两个属性基于容器宽高计算位置，搭配transform: translate(-50%, -50%)让按钮自身中心对准定位点，位置更精准。
• 视口重置：给html/body设置height:100%并清除默认边距，确保100vh能正确对应视口高度。
• 语法修复：修正.button7的选择器，让样式正常生效。
• 媒体查询优化：去掉无效条件，用vw单位设置内边距，保证小屏按钮尺寸适配。

如果不需要容器滚动，把.container的overflow: auto改成overflow: hidden即可。

内容的提问来源于stack exchange，提问作者RPM