使用@media query适配不同屏幕时样式未生效如何解决

问题原因与解决方案 #

• 1. 媒体查询属性已废弃
     你使用的min-device-width和max-device-width属于已被W3C废弃的媒体查询属性，该属性匹配的是设备物理屏幕宽度，而非浏览器可视区域宽度，在高DPI设备、开启缩放的场景下极易出现匹配失效问题。
     替换为标准的min-width和max-width即可，修改后代码参考：

@media only screen and (min-width:992px) and (max-width:1199px){
  .container{
    max-width: 100%;
    min-width: 100%;
    width: 100%;
  }
}

如果确有匹配设备物理宽度的需求可以保留原有属性，建议优先使用标准视口宽度属性。

• 2. 缺失视口配置
     响应式页面必须在HTML的<head>标签内添加视口配置标签，否则浏览器会默认使用980px作为视口宽度，导致媒体查询匹配逻辑异常：

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

• 3. CSS优先级/顺序问题
     CSS规则遵循同优先级下后写生效、高优先级规则优先生效的逻辑，请确认两点：
  • 该媒体查询代码的位置要放在默认.container样式的后面，避免被默认样式覆盖
  • 如果原有.container的选择器优先级更高（比如写为#main .container、div.container），可以给当前规则添加!important临时验证，或者提升当前选择器的优先级到和原有规则一致。
• 4. 前置代码语法错误
     检查该媒体查询之前的所有CSS代码，确认没有遗漏大括号、分号等语法问题，前置代码的语法错误会导致后续的媒体查询规则被浏览器整体忽略。

内容的提问来源于stack exchange，提问作者C J.