CSS代码中响应式media query不生效，该如何排查解决？

核心原因 #

• CSS媒体查询条件拼写错误：你在编写@media规则时将max-width误拼写为max-widht，浏览器无法识别错误的属性名，会直接忽略整条媒体查询规则。
• 样式表加载规则与内部查询规则不匹配：你在引入style.css的link标签上设置了media="screen and (max-width: 600px)"，这意味着该CSS文件仅在屏幕宽度≤600px时才会被加载，但是CSS内部的媒体查询触发阈值是≤650px，在601px-650px的区间内样式文件未加载，对应规则自然无法生效。

修复方案 #

1. 先修正CSS里的拼写错误，将@media screen and (max-widht: 650px)改为@media screen and (max-width: 650px)。
2. 根据你的实际需求调整样式加载规则：
   • 如果你希望所有尺寸下都加载该CSS文件，仅靠内部媒体查询控制生效范围，直接移除link标签上的media="screen and (max-width: 600px)"属性即可。
   • 如果你要保留link标签上的媒体查询加载限制，将link标签里的max-width: 600px调整为和CSS内部一致的max-width: 650px即可。

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