Media Query CSS未满足宽度条件却覆盖原有样式问题咨询

故障排查及修复方案 #

• 未配置viewport视口标签（概率最高）
  页面头部<head>标签中没有添加视口配置，浏览器会默认使用适配旧设备的虚拟视口宽度计算，不会采用你实际1800px的屏幕宽度，导致媒体查询误触发。
  修复方式：在<head>中插入如下代码：

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

• 浏览器缩放比例异常
  浏览器页面放大后，逻辑视口宽度会低于实际屏幕宽度，比如1800px的屏幕放大到125%时，逻辑视口宽度仅为1440px，符合max-width:1600px的触发条件。
  修复方式：按下Ctrl+0（Windows系统）/ Command+0（Mac系统）重置页面缩放比例为100%后验证效果。
• CSS规则顺序错误
  如果你将媒体查询的代码写在了全局.realiser-devis规则的前面，相同优先级下后定义的全局规则本应覆盖媒体查询规则，但如果全局规则被其他样式覆盖失效，也会出现异常。
  修复方式：调整代码顺序，保证媒体查询代码写在全局.realiser-devis规则之后。
• 存在冲突样式规则
  打开浏览器开发者工具的元素样式面板，确认生效的12px字体规则是否确实来自你写的这组媒体查询，排查是否存在其他更高优先级的选择器（如ID选择器、!important声明）、其他同名媒体查询意外应用了12px的字体样式。

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