为何CSS媒体查询在移动端屏幕宽度匹配时仍不生效？

你遗漏了viewport元标签的配置，这是手机端响应式媒体查询生效的关键。

手机浏览器默认会把页面渲染在一个虚拟视口（通常宽度为980px）中，再缩放适配屏幕，这就导致即使你的手机实际屏幕宽度小于768px，浏览器识别的视口宽度还是远大于768px，自然不会触发你的媒体查询规则。

解决方法 #

在HTML的<head>标签内添加以下元标签：

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

标签参数说明： #

• width=device-width：强制视口宽度与设备实际屏幕宽度一致
• initial-scale=1.0：设置页面初始缩放比例为100%，避免浏览器自动缩放页面

添加这个标签后，手机浏览器就能正确识别设备的实际宽度，你的媒体查询规则就会正常生效，手机端打开页面时body背景色会变为lightblue。

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