如何实现网页在手机端打开时切换背景？已尝试CSS媒体查询但无效

你的代码逻辑没问题，但没生效通常是以下几个原因，对应解决方法：

• 缺失viewport元标签
  手机浏览器默认会把页面渲染成桌面端宽度（通常980px），导致你的max-width:768px媒体查询不会触发。必须在<head>标签里添加viewport元标签，让浏览器使用设备实际宽度渲染：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

• 样式被更高优先级的规则覆盖
  如果body的背景色在其他样式里被定义过（比如内联样式、ID选择器样式），你的媒体查询样式权重不够就会失效。可以尝试提升选择器权重，或者临时用!important测试：

  @media only screen and (max-width: 768px) {
    body {
      background-color: blue !important; /* 仅测试用，优先考虑调整权重 */
    }
  }
  

  更规范的做法是用更具体的选择器，比如html body代替单独的body，避免依赖!important。

• 媒体查询的宽度阈值不符合设备实际情况
  现在不少大屏手机的视口宽度超过768px，你可以把阈值调高到992px，覆盖更多移动设备：

  @media only screen and (max-width: 992px) {
    body {
      background-color: blue;
    }
  }
  

• 检查语法错误
  确认媒体查询的语法没有拼写错误，比如max-width有没有写错、and前后有没有空格、大括号是否闭合。你的代码语法是正确的，但可以再核对一遍。

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