Media Query适配移动端时意外修改桌面端布局求助

核心问题是你的媒体查询没有精准限定生效范围，导致样式同时作用于桌面端。以下是具体排查和修复方法：

必做的核心修复 #

• 给媒体查询加正确的移动端断点
  只有当媒体查询明确指定「屏幕宽度≤移动端阈值」时，样式才只会在移动端生效。比如用max-width: 768px（这个阈值可根据你的需求调整），示例代码：

  /* 桌面端默认样式（先写） */
  .target-article {
    width: 85%;
    border: 1px solid #ccc; /* 调试用可忽略 */
  }
  
  /* 仅移动端生效的样式（后写） */
  @media (max-width: 768px) {
    .target-article {
      width: 100%;
      border: 1px solid red; /* 调试用可忽略 */
    }
  }
  

  别搞反成min-width——那会从设定的宽度开始，一直覆盖到桌面端。

额外排查点 #

• 检查样式书写顺序
  媒体查询的样式必须写在对应的桌面端样式后面，不然桌面端样式会反过来覆盖移动端的规则。
• 避免全局样式污染
  如果你的目标文章用了通用类名（比如article），要确保媒体查询只针对首页的目标文章，比如给它加个专属类名home-target-article，避免影响其他页面的同类型元素。
• 可选：限定设备类型
  针对老浏览器，可加上screen限定只对屏幕设备生效：

  @media screen and (max-width: 768px) {
    /* 移动端样式 */
  }
  

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