屏幕宽度小于600px时标题颜色不切换问题求助

看起来你的媒体查询没生效大概率是因为缺少viewport元标签，这是移动端适配时非常容易忽略的关键点！

浏览器在移动端默认会把页面宽度渲染成桌面端的尺寸（通常是980px左右），然后再缩放显示，这就导致你的max-width:600px媒体查询根本不会被触发——因为浏览器认为当前页面宽度远大于600px。

解决步骤： #

1. 在HTML的<head>标签里添加viewport元标签：

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

这个标签会告诉浏览器使用设备的实际宽度作为页面宽度，并且初始缩放比例为1，这样媒体查询就能正确识别屏幕尺寸了。

2. 你还可以简化CSS代码，因为媒体查询里重复了很多和默认样式一致的属性，只保留需要修改的color即可：

/* Add a headline */
.top-bar h1 {
    float: left;
    margin-left: 15px;
    font-size: 50px;
    font-weight: bold;
    color: white;
}

@media (max-width: 600px) {
    .top-bar h1 {
        color: red; /* 只保留需要修改的属性，让代码更简洁 */
    }
}

其他排查方向： #

如果添加viewport后还是不行，可以检查：

• 有没有其他CSS规则（比如内联样式、更高优先级的选择器）覆盖了color属性？可以打开浏览器开发者工具（F12）查看元素的样式计算结果，看看color: red是否被划掉了。
• 媒体查询的语法是否有错误？你的写法是正确的，但可以试试去掉括号写成@media max-width: 600px（不过现代浏览器两种写法都支持）。

备注：内容来源于stack exchange，提问作者BoostedBird