@supports不在FF和Chrome中使用

时间:2018-06-19 15:36:42

标签: css google-chrome firefox less

我正在用Less语言编写CSS,由于某种原因,@ supports并未显示。可能是嵌套问题吗?

@supports(display: grid) {
    .two-up {
        @media screen and (min-width: @small-screen) {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
    }
}

1 个答案:

答案 0 :(得分:1)

更少code compiles ok

它在Chrome和Firefox中均可使用: https://codepen.io/oslego/pen/KeQpgr

@small-screen: 10em;

@supports(display: grid) {
    .two-up {
        @media screen and (min-width: @small-screen) {
            width: 500px;
            height: 500px;
            background-color: green;
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
    }
}
  <div class="two-up"></div>

也许您遵循该规则或以意外方式与之竞争的其他代码。