Соотношение сторон мультимедийных запросов SCSS не работает

Jotosha спросил: 28 апреля 2018 в 08:43 в: css

im new для SCSS и im, пытаясь сохранить хорошее качество обложки моего сайта. В любом случае, 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 и отношение размера устройства не работает, пока min-height работает нормально.

1 ответ

Есть решение
Jotosha ответил: 22 июня 2018 в 07:44

Я понял это.

, когда я написал

    @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');
        }