小视口下文本无法隐藏求助——media queries失效排查

你的媒体查询未生效，大概率是以下几个常见问题导致，逐个排查即可：

1. 缺少viewport元标签 #

移动端浏览器默认会模拟桌面端宽度渲染页面，导致媒体查询无法正确触发。必须在HTML的<head>中添加viewport元标签，让页面适配设备宽度：

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

2. 选择器优先级不足 #

你的HTML里header带有word类，但CSS选择器用的是header h1，如果h1有其他优先级更高的样式（比如.word h1），会直接覆盖媒体查询的规则。可以把选择器改成更精确的版本，提升优先级：

@media all and (max-width: 600px) {
  header.word h1 {
    display: none;
  }
}

3. 确认CSS加载顺序与语法 #

• 确保媒体查询的CSS代码写在其他针对h1的样式之后（CSS遵循“后定义的规则优先”）
• 检查整体CSS是否有语法错误，比如括号不闭合、分号遗漏（你提供的代码语法没问题，但要注意嵌入位置是否正确，建议放在<head>内的<style>标签中）

修正后的完整代码示例 #

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* 基础样式示例 */
    header.word h1 {
      margin: 0;
    }

    @media all and (max-width: 600px) {
      header.word h1 {
        display: none;
      }
    }
  </style>
</head>
<body>
  <header class="word">
    <h1> MY <span> WEBSITE </span> </h1>
  </header>
</body>
</html>

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