CSS中无法正确使用@media媒体查询 移动端样式被桌面端覆盖如何解决

你遇到的问题90%以上的概率是缺失响应式必备的viewport元标签导致的，具体修复方案如下：

• 第一步：补全HTML视口配置
  在你HTML文件的<head>标签内添加如下代码：

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

这个标签的作用是让移动设备的浏览器用实际设备宽度作为页面渲染的视口宽度，不会默认模拟980px的桌面端宽度，避免移动设备误触发你设置的min-width: 500px媒体查询规则。

• 第二步：可选校验CSS规则顺序
  你当前的媒体查询写在全局移动端基础样式之后，顺序是正确的。如果后续新增其他样式规则，需要保证桌面端适配的媒体查询始终放在对应移动端基础样式的后面，避免被基础样式覆盖。
• 第三步：可选校验语法
  检查你写的媒体查询有没有拼写错误，比如不要把min-width误写为max-width，媒体查询的大括号、选择器语法要符合规范，你当前贴出的CSS代码语法没有问题。

修改完成后打开浏览器开发者工具，切换到移动设备模拟模式，调整视口宽度可以看到，只有当宽度≥500px时才会加载桌面端适配样式，小于500px时自动使用移动端默认样式。

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