HTML/CSS响应式开发问题：调整视口时文字重叠如何解决？

布局错乱核心原因 #

• 所有文本、按钮元素全部使用position: absolute脱离了正常文档流，无自适应排布规则，视口尺寸变化时元素位置计算完全依赖固定百分比参数，直接导致重叠
• 文本左内边距设置为padding: 0 60%，小屏设备下可视宽度不足原屏幕的40%，文本自动换行后高度溢出，和下方元素重叠
• 字体尺寸使用vh单位，仅跟随视口高度变化，宽度缩小时文字不会对应缩小，进一步加剧溢出重叠问题
• body设置了overflow: hidden，溢出的内容直接被隐藏无法滚动查看

修复方案 #

第一步：调整全局布局逻辑，废弃全局绝对定位 #

改用Flex纵向排列布局，让元素遵循正常文档流自动排布，不会因为视口变化错位：

body {
  background-image: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(208,58,58,1) 50%, rgba(252,69,115,1) 100%);
  min-height: 100vh;
  margin: 0;
  padding: 8vh 10vw;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

第二步：修正文本元素样式，移除绝对定位和不合理的内边距 #

将固定左内边距改为最大宽度限制，适配不同屏幕宽度，字体单位改用clamp实现动态适配：

h1.titolo {
  color: white;
  margin: 0 0 3vh 0;
  max-width: 600px;
  text-align: left;
  font-size: clamp(2.5rem, 7vh, 5rem);
}

p.descrizione-gioco {
  color: white;
  font-weight: 600;
  max-width: 600px;
  margin: 0 0 5vh 0;
  text-align: left;
  font-size: clamp(0.9rem, 1.8vh, 1.2rem);
  line-height: 1.5;
}

a {
  color: white;
  text-decoration: none;
  font-weight: bold
}

a:hover {
  color: white;
  text-decoration: none
}

第三步：调整按钮样式，移除固定定位 #

.animate__animated.animate__fadeInRight {
  width: clamp(200px, 30vw, 300px);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  height: 55px;
  text-align:center;
  border: none;
  background-size: 300% 100%;
  border-radius: 50px;
  transition: all .4s ease-in-out;
  --animate-duration: 1.45s;
}

.animate__animated.animate__fadeInRight:hover {
  background-position: 100% 0;
}

.animate__animated.animate__fadeInRight:focus {
  outline: none;
}

.animate__animated.animate__fadeInRight.azionamento {
    background-image: linear-gradient(
      to right,
      #ed6ea0,
      #ec8c69,
      #f7186a,
      #fbb03b
    );
    box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}

第四步：新增小屏适配规则 #

当屏幕宽度小于768px时，调整对齐方式为居中，适配移动端显示：

@media (max-width: 768px) {
  body {
    align-items: center;
    padding: 10vh 5vw;
  }
  h1.titolo, p.descrizione-gioco {
    text-align: center;
  }
}

HTML部分无需修改，直接替换原有CSS内容即可实现响应式适配，不会再出现文字重叠、布局错乱的问题。

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