SCSS 媒体查询纵横比不起作用

Posted 2023-03-06

【中文标题】SCSS 媒体查询纵横比不起作用

【英文标题】：SCSS media query aspect ratio not working

【发布时间】：2018-11-01 01:59:56

【问题描述】：

我是 SCSS 的新手，我正在努力保持我网站的封面图片质量。 无论如何，css 运行良好，而 scss 则不行。

SCSS

#page-login-index 
@media screen and (min-aspect-ratio: 5/4) 
    background-color: red;

CSS

@media screen and (min-aspect-ratio: 5/4) 
#page-login-index 
background-color: red;

我需要在 SCSS 中这样做，因为我从 php 加载了一些东西。我注意到 aspect-ratio 和 device-aspect-ratio 不工作，而 min-height 工作正常。

【问题讨论】：

此scss 代码与我的css 代码相同。你能分享更多信息吗？

【参考方案1】：

我想通了。

我写的时候

    @media (min-aspect-ratio: 5/4) 
        background-image: url('someurl');
    

scss 编译成 (min-aspect-ratio: 1.25) 这是错误的

我不得不将它作为一个字符串放入变量中，例如： $aspect54 : "(最小纵横比: 5/4)";

所以最后看起来是这样的

$aspect54 : "(min-aspect-ratio: 5/4)";        
@media #$aspect54 
            background-image: url('someurl');
        

【讨论】：

在 less 文件中也有同样的问题，在 less 中你也可以使用 ~"5/4" 转义字符，参见这篇文章：***.com/questions/8289883/…

【参考方案2】：

将min-aspect-ratio: 5/4 不转义将失败，因为sass 编译器将输出min-aspect-ratio: 1.25

将表达式放在引号中以避免编译：

min-aspect-ratio: "5/4"