响应式诊所HTML网站移动端表格内容溢出边距问题求助

问题根源 #

排查到代码里有3个核心错误导致移动端内容/表格溢出：

1. 响应式媒体查询中给.wrapper、.header、.wrapper p设置了固定像素宽度，小屏设备宽度小于固定值时就会强制溢出视口
2. 表格没有配置换行、滚动规则，内容/图片超出单元格宽度时不会自动适配
3. 200px断点下的.table宽度设置错误，误用了视口高度单位vh计算宽度，完全不符合预期

修复步骤 #

1. 修正媒体查询规则，移除固定宽度设置 #

把现有3个媒体查询块全部替换为以下代码：

/* 屏幕宽度小于700px */
@media screen and (max-width: 700px) {
  .row {
    flex-direction: column;
  }
  /* 移除所有固定宽度设置，保留100%宽度适配视口 */
  .wrapper, .header, .wrapper p {
    width: 100%;
  }
  /* 导航项自动换行避免溢出 */
  nav ul li {
    display: block;
    line-height: 40px;
  }
  nav {
    height: auto;
  }
  /* 表格适配规则 */
  table {
    display: block;
    overflow-x: auto;
    /* 强制单元格内容换行 */
    word-break: break-all;
  }
  table .img-LCG {
    width: 60px;
  }
  table p {
    font-size: 14px;
    text-indent: 0;
  }
}

/* 屏幕宽度小于400px */
@media screen and (max-width: 400px) {
  .row {
    flex-direction: column;
  }
  .wrapper, .header, .wrapper p {
    width: 100%;
  }
  ul li a {
    padding: 0 15px;
    font-size: 16px;
  }
  table p {
    font-size: 12px;
  }
}

2. 移除无效的200px断点代码 #

现有代码中@media screen and (max-width: 200px)的规则完全不符合常规设备尺寸，且宽度计算错误，直接删除整个块即可。

3. 补充表格基础适配样式 #

在原有table的CSS规则中新增2条属性：

table{
  width: 100%;
  background-color: white;
  /* 新增以下两行 */
  table-layout: fixed;
  word-wrap: break-word;
}

额外优化建议 #

• 现有代码存在语法错误：ul li规则里background-color: grey:后面的冒号写错成分号，修正为background-color: grey;
• 负padding属性不生效，可删除所有padding: -10px的无效代码
• 导航栏的.navbar规则实际页面没有用到对应类名，可删除冗余代码

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