CSS @media屏幕方向查询失效排查：为何空body选择器能修复？

现象 #

• 测试屏幕方向媒体查询@media (orientation)时，初始代码完全不生效，body背景始终显示为白色
• 仅在样式中添加一个仅包含CSS注释的body选择器后，媒体查询即可正常触发

根因 #

排查确认，问题源于<style>代码块内误用了HTML注释语法（<!-- -->），而非CSS标准的注释语法（/* */）。这种错误会干扰浏览器对CSS代码的解析逻辑，导致后续的媒体查询规则无法被正确识别。

复现环境 #

• Chrome 107
• Firefox 107（Ubuntu 22.04）

解决方法 #

将<style>标签内的所有HTML注释替换为CSS标准注释：

• 错误写法：<!-- 此为HTML注释，不能用于<style>块 -->
• 正确写法：/* 此为CSS注释，适用于<style>块内 */

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