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

【问题标题】：SCSS media query aspect ratio not workingSCSS 媒体查询纵横比不起作用
【发布时间】：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 工作正常。

【问题讨论】：

【解决方案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" 转义字符，参见这篇文章：stackoverflow.com/questions/8289883/…

【解决方案2】：

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

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

min-aspect-ratio: "5/4"

【讨论】：