SCSS媒体查询aspect ratio不生效，求解决方法

算力阿峰

2026-5-28

搞定你的SCSS媒体查询问题

嘿，作为SCSS新手遇到这种嵌套媒体查询不生效的问题太正常了！先给你捋清楚：你写的SCSS语法本身是没问题的，正常编译后应该和你那套能正常工作的CSS代码完全一样。那为啥会出现aspect-ratio相关的规则不生效呢？咱们一步步排查：

先查编译结果！
很多时候问题出在编译环节，比如工具缓存、配置出错，导致嵌套的媒体查询没被正确转换。你直接去看编译后的CSS文件，看看是不是和你手动写的有效CSS一模一样。如果不一样，那要么清理下编译缓存重新编译，要么检查下你的SCSS编译工具（比如Dart Sass、Node-sass）的配置，甚至升级下工具版本试试。
别再用废弃的属性啦
你提到device-aspect-ratio也不生效，这个属性其实已经被现代浏览器废弃了，现在统一用min-aspect-ratio/max-aspect-ratio来针对视口比例做判断，赶紧换掉旧属性吧。
检查样式优先级冲突
有没有可能其他样式把这个背景色给覆盖了？比如内联样式、更具体的选择器？打开浏览器开发者工具，看看#page-login-index元素的样式面板，这条媒体查询的规则是不是被划掉了（表示被更高优先级的样式覆盖）。如果是，那就调整选择器的权重，或者用!important临时测试（不推荐长期用哈）。
换个写法试试
要是嵌套写法真的有编译兼容问题，你可以暂时改成和CSS一样的外层媒体查询写法：
```
@media screen and (min-aspect-ratio: 5/4) {
  #page-login-index {
    background-color: red;
  }
}
```
要是这样写能生效，那肯定是你的编译环境对嵌套媒体查询的处理有问题，得调整配置或者换个编译工具了。