小屏幕文本适配问题求助：@media使用后页面布局错乱

核心问题 #

1. 媒体查询方向错误：你使用的@media screen and (min-width: 767px)是针对宽度≥767px的大屏设备生效的，小屏幕设备不会触发该规则，反而可能和原有样式冲突导致布局错乱。小屏幕适配应使用@media screen and (max-width: 767px)。
2. 固定padding导致溢出：代码中给.training、.shop、.services设置了超大固定padding（如padding-top:500px、padding-right:430px），小屏幕宽度有限，这些固定值会让元素超出容器范围，引发错位。
3. 图片绝对定位脱离约束：图片设置position: absolute; left:0; top:0; width:100%; height:100%后脱离父元素约束，在小屏幕中可能覆盖整个页面或错位。
4. 容器固定高度不适配：.image的固定height:800px在小屏幕上会导致页面过长，不符合移动端视觉体验。

修复后的完整代码 #

<style>
.image{
  min-height: 500px; /* 改用最小高度，适配不同屏幕 */
  width: 100%;
  display:flex;
  justify-content: space-evenly;
  align-items: center;
  font-family: Times New Roman;
  color: white;
  font-size:30px;
  background-size: cover;
  background-position: center;
}

/* 移除超大固定padding，改用flex布局对齐 */
.training, .shop, .services{
  position: relative; /* 为图片相对定位提供参考 */
  width: 100px;
  text-align: center;
}

.image>div img {
  position: absolute;
  left: 50%; /* 居中定位图片 */
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px; /* 设置图片固定尺寸，避免覆盖页面 */
  height: 200px;
  object-fit: cover;
  opacity: 0;
  z-index: 0;
}

.image>div span {
  position: relative;
  z-index: 1;
  cursor: pointer;
  display: inline-block;
}

.image>div span:hover+img {
  opacity: 1;
}

/* 小屏幕适配规则（宽度≤767px） */
@media screen and (max-width: 767px) {
  .image{
    flex-direction: column; /* 垂直排列元素 */
    min-height: 600px;
    font-size:24px; /* 缩小字体适配小屏 */
  }
  
  .training, .shop, .services{
    margin: 20px 0; /* 增加垂直间距 */
  }
  
  .image>div img {
    width: 150px; /* 小屏幕缩小图片尺寸 */
    height: 150px;
  }
}
</style>

<div class="image">
  <div class="services">
    <span onclick="window.location='';">Services</span>
    <img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ"> 
  </div>
  
  <div class="training">
    <span onclick="window.location='beta.edgerope.com/courses';">Training</span>
    <img src="https://beta.edgerope.com/wp-content/uploads/2022/08/1-1-1536x864.jpg"> 
  </div>
  
  <div class="shop">
    <span onclick="window.location='beta.edgerope.com/shop';">Shop</span>
    <img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ"> 
  </div>
</div>

关键修改说明 #

• 调整媒体查询为max-width:767px，确保小屏幕设备触发适配样式。
• 移除子元素的超大固定padding，利用flex布局的对齐属性实现居中，避免小屏溢出。
• 给子元素添加position:relative，让绝对定位的图片以父元素为参考，同时通过transform实现图片居中，避免覆盖页面。
• 小屏模式下将flex方向改为垂直排列，缩小字体和图片尺寸，优化移动端显示。
• 将.image的固定高度改为min-height，保证容器高度自适应内容。

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