CSS媒体查询失效求助：响应式网站移动端桌面端适配异常

先看你给出的CSS代码，这里面有个致命的逻辑错误直接导致部分媒体查询完全不工作，另外还有几个可能的隐藏问题，我帮你一步步梳理：

1. 修复媒体查询的逻辑矛盾 #

你写的第二个媒体查询：

@media screen and (max-width: 700px) and (min-width: 900px){ 
  .container{ width: 50vw ; } 
}

这个条件永远不可能成立——屏幕宽度不可能同时小于等于700px且大于等于900px！这就导致这个查询块里的样式永远不会被应用。如果你是想针对700px到900px之间的屏幕，应该把条件改成：

@media screen and (min-width: 700px) and (max-width: 899px){ 
  .container{ width: 50vw ; } 
}

（注意把max设为899px，避免和第一个min-width:900px的查询重叠）

2. 检查viewport元标签（移动端适配必备） #

如果你的媒体查询在移动端完全没反应，很大概率是没在HTML的<head>里加viewport元标签。这个标签是告诉移动端浏览器以正确的方式渲染页面，不加的话，移动端会把页面当成桌面端缩放，媒体查询的断点就会失效。

必须在<head>里添加：

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

3. 优化媒体查询的顺序 #

CSS是层叠生效的，后面的规则会覆盖前面的。建议按照从窄屏到宽屏的顺序写媒体查询（逻辑更清晰，避免样式被意外覆盖）。比如修正后的完整媒体查询可以写成：

/* 默认样式（窄屏优先） */
.container{
  width: 99vw; /* 先给小屏幕的默认样式 */
}
.show-onscreen{ display: none; } /* 默认隐藏桌面端元素 */
.hide-onscreen{ display: block; } /* 默认显示移动端元素 */

/* 屏幕宽度≥700px时的样式 */
@media screen and (min-width: 700px){ 
  .container{ width: 50vw ; } 
}

/* 屏幕宽度≥900px时的样式 */
@media screen and (min-width: 900px){ 
  .container{ width: 30vw; } 
  .show-onscreen{ display: block; } 
  .hide-onscreen{ display: none; } 
}

4. 排查其他可能的问题 #

• 检查你的CSS是否正确引入到HTML中，有没有路径错误或者语法错误（比如漏掉分号、大括号）
• 检查.container的基础样式有没有被其他更高优先级的样式覆盖（比如行内样式、ID选择器），可以用浏览器开发者工具（F12）查看元素的样式计算结果，确认媒体查询的样式是否被应用

按照上面的步骤修改后，你的媒体查询应该就能正常工作了！

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