SCSS媒体查询宽高比不起作用

Question

我是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加载一些东西。我注意到纵横比和设备宽高比在 min-height 正常工作时无效。

Answer 1

我明白了。

当我写作

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

scss将其编译为（min-aspect-ratio：1.25）这是错误的

我不得不把它作为字符串放入变量中，如： $ aspect54：＆＃34;（min-aspect-ratio：5/4）＆＃34;;

所以最后它看起来像这样

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

Answer 2

在没有转义的情况下放置min-aspect-ratio: 5/4将会失败，因为sass编译器将输出min-aspect-ratio: 1.25

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

min-aspect-ratio: "5/4"