css 4 级@media 查询未按预期工作

Question

我刚开始学习 CSS 媒体查询，正如 mdn documentation 所说

In Media Queries Level 4 this can be written as:
@media (width <= 30em) { ... }

但是当我尝试同样的操作时它会报错，如果我将 <= 替换为 a : 错误就会消失。我需要知道如何在媒体查询中使用 4 级语法。提前致谢。

@media (width <= 768px) {
    h1 {
        font-size: 3em;
        color: mediumvioletred;
    }
    nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: mediumaquamarine;
    }
}

Answer 1

Visual Studio Code does not support 4 级范围语法呢。此外，MDN 表示目前只有 Firefox 支持该语法。如果您需要跨浏览器支持，您现在需要坚持使用原始的 max-width 语法：

@media (max-width: 768px) {
    h1 {
        font-size: 3em;
        color: mediumvioletred;
    }
    nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: mediumaquamarine;
    }
}

否则，你所拥有的就是正确的。

css 4 级@media 查询未按预期工作

css level 4 @media queries not working as expected

css

media-queries

visual-studio-code