CSS中两条@media媒体查询规则仅第二条生效问题咨询

问题原因 #

• 缺少移动端视口配置：如果在移动端场景测试，未在HTML的<head>中添加viewport元标签，浏览器默认布局视口宽度通常为980px，远高于600px阈值，因此只会命中第二个@media规则。
• 当前设备宽度超出第一个媒体查询范围：你使用的测试设备的device-width（设备物理像素宽度）大于等于600px，第一条规则完全不匹配，Chrome开发者工具默认仅展示当前命中的媒体查询对应的样式，因此不会显示第一条规则。
• 断点边界值冲突：当设备宽度恰好等于600px时，两条媒体查询规则同时命中，CSS后定义的规则优先级更高，会覆盖第一条的样式，此时第一条规则会在样式面板中显示为划掉状态，容易误以为未加载。
• device-width属性适配性差：device-width已被CSS官方规范废弃，部分现代浏览器对其支持存在差异，可能导致匹配异常。

解决方法 #

1. 添加viewport元标签
   在HTML的<head>节点中插入如下配置，让布局视口宽度和设备实际宽度保持一致，避免浏览器默认缩放导致的匹配异常：

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

2. 替换媒体查询属性并调整断点
   将废弃的device-width替换为适配性更强的width（匹配浏览器视口逻辑宽度），同时调整第一个规则的最大宽度为599.98px，避免边界值同时命中的冲突，修改后的CSS代码如下：

@media screen
  and (max-width: 599.98px)
  and (min-width: 0px)
{
  #navLink {
    font-size: 1.6em;
  }
}
@media screen
  and (max-width: 2000px)
  and (min-width: 600px)
{
  #navLink {
    font-size: 35px;
  }
}

3. 测试验证
   打开Chrome开发者工具的设备模拟功能，手动拖拽调整视口宽度，或直接输入目标宽度数值，即可看到两条媒体查询规则在对应宽度区间分别生效，样式面板也会同步展示当前命中的规则。

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