时间戳

首页 > 解决方案 > @supports 不在 FF 和 Chrome 中使用

css - @supports 不在 FF 和 Chrome 中使用

问题描述

我正在用 Less 编写我的 CSS，由于某种原因，@supports 没有显示出来。会不会是嵌套问题？

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

标签： cssgoogle-chromefirefoxless

解决方案

LESS代码编译正常。

它适用于 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>

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

推荐阅读