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正常工作时，aspect-ratio和device-aspect-ratio不起作用。

Answer 1

我想到了。

当我写

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

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

我不得不将其作为字符串放入变量中，例如： $ aspect54：“（min-aspect-ratio：5/4）”;

所以最后看起来像这样

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