Chrome桌面端Media Queries失效但Firefox正常，如何解决？

嘿，我仔细看了你的代码和问题描述，这里有两个关键问题需要修正，就能让媒体查询在Chrome里正常工作了：

1. 调整媒体查询的顺序 #

CSS是遵循层叠优先级的，当多个媒体查询条件同时满足时，后面的规则会覆盖前面的。你的代码里先写了max-width:400px的规则，再写max-width:900px的规则——这意味着当屏幕宽度小于400px时，两个媒体查询的条件都成立（400px < 900px），所以红色背景会覆盖绿色背景，导致你误以为Chrome不生效（其实Firefox里也是同样的逻辑，可能你测试的场景刚好没注意到这一点）。

正确的做法是把范围更大的媒体查询放在前面，范围更小的放在后面，这样当屏幕宽度缩小到符合更小范围的条件时，后面的规则会正确覆盖前面的：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body { background-color: yellow; }
/* 先处理屏幕宽度≤900px的情况 */
@media screen and (max-width: 900px) { body { background-color: red; } }
/* 再处理屏幕宽度≤400px的情况，覆盖上面的红色 */
@media screen and (max-width: 400px) { body { background-color: green; } }
</style>
</head>
<body>
</body>
</html>

2. 添加Viewport元标签（针对移动设备上的Chrome） #

如果你是在移动设备的Chrome上测试，缺少viewport元标签会导致浏览器使用默认的宽屏视口（通常是980px），这样你的媒体查询可能不会触发。只需要在<head>里添加这行代码即可：

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

完整的修正代码如下：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body { background-color: yellow; }
@media screen and (max-width: 900px) { body { background-color: red; } }
@media screen and (max-width: 400px) { body { background-color: green; } }
</style>
</head>
<body>
</body>
</html>

现在你再去Chrome里测试，不管是桌面端还是移动端，媒体查询都应该能正常工作啦！

内容的提问来源于stack exchange，提问作者maththi siva charan