移动端网站显示异常（板块重叠）：Media Query优化求助

核心问题排查 #

板块重叠大概率是这两个原因：

• 桌面端设置的固定宽度/高度未做移动端适配，小屏幕下元素挤在一起
• flex/grid布局的响应式规则缺失，容器放不下多个子元素就会出现重叠

针对Plan & Feature板块的Media Query优化 #

以下是一套移动端优先的适配方案，以768px作为移动端断点（覆盖大部分手机和平板）：

Plan板块修复代码 #

/* 桌面端默认样式 */
.plan-container {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
}
.plan-card {
  width: 30%;
  padding: 1.5rem;
}

/* 768px以下移动端适配 */
@media screen and (max-width: 768px) {
  .plan-container {
    flex-direction: column; /* 切换为纵向排列 */
    gap: 1.5rem;
  }
  .plan-card {
    width: 100%; /* 占满父容器宽度 */
    box-sizing: border-box; /* 确保内边距不会额外撑开元素宽度 */
  }
}

Feature板块修复代码 #

/* 桌面端默认样式 */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.feature-item {
  padding: 1rem;
}

/* 768px以下移动端适配 */
@media screen and (max-width: 768px) {
  .feature-grid {
    grid-template-columns: 1fr; /* 切换为单列布局 */
    gap: 1.2rem;
  }
  .feature-item {
    margin: 0 0.5rem; /* 增加左右边距避免贴屏幕边缘 */
  }
}

通用适配技巧 #

• 全局开启box-sizing: border-box;，从根源解决内边距撑宽元素的问题：

* {
  box-sizing: border-box;
}

• 删除所有硬编码的min-width值，这类值会锁死元素宽度，导致小屏幕下溢出重叠
• 若使用了绝对定位的元素，一定要在Media Query里调整它的定位参数（比如top/left值），否则容易脱离布局流引发重叠

调试建议 #

• 用浏览器F12打开设备模拟器，切换不同手机尺寸测试，实时调整Media Query的断点值
• 逐步禁用现有CSS规则，定位到底是哪段代码导致的重叠

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