Chrome浏览器手动调整窗口时@media媒体查询不生效问题

解决方法 #

• 添加viewport元标签
  这是该问题最高发的诱因：Chrome响应式调试模式默认会自动启用移动端视口规则，但普通浏览模式下如果HTML头部没有配置viewport标签，浏览器会默认使用980px的虚拟视口宽度，导致你设置的600px断点永远不会满足触发条件。
  在HTML的<head>标签中插入如下代码即可：

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

• 修复CSS语法错误
  你贴出的CSS代码存在大括号闭合位置错误的问题，外层媒体查询的闭合括号被放在代码块外，实际运行时如果存在语法不闭合的问题，Chrome普通模式的样式解析容错性低于调试模式和火狐，会导致后续媒体查询规则失效。修正后的CSS参考：

input {height:40px;}
@media screen and (min-width:600px) {
  #form {
    width:600px;
    grid-template-rows: 100%;
  }
  form {
    display:grid;
    grid-template-columns: 2fr 4fr;
    grid-template-rows: 20% 20% 20% 20% 20%;
  }
}
@media screen and (max-width:599px) {
  #form, label, input {
    width:100% !important;
  }
}

• 重置浏览器缩放比例
  如果Chrome页面缩放比例不是100%，会导致视口宽度计算偏移，断点无法正常触发。按Ctrl + 0（Windows）/Cmd + 0（Mac）可快速重置页面缩放为100%。
• 排查扩展干扰
  部分样式修改、广告拦截类扩展会注入额外CSS修改页面属性，可尝试用无痕模式打开页面排查是否为扩展导致的规则失效。

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