Question

我正在尝试验证我的CSS。我的主要样式表没有任何错误，但是我有带有媒体查询的mobile.css，tablet.css和laptop.css，当我进行验证时，它们都返回“仅无法识别的媒体”消息。

这是我的mobile.css：

@media only screen and (min-width : 320px) and (max-width : 500px)  {
.container {
    width: 100%;
}
header {
    width: 100%;
    height: 100px;
    background-size: 100%;
    background-repeat: no-repeat;
}
.content {
    width: 90%;
}
footer {
    width: 100%;
}
nav {
    display: none;
}
}

其他文件/媒体查询非常相似（不同的最小宽度等）。

验证者说：

对不起！我们发现以下错误（2）

仅1种无法识别的媒体

20 Parse Error屏幕，（最小宽度：320像素）和（最大宽度：500像素）{.container {宽度：100％; }标头{宽度：100％；高度：100px；背景大小：100％；背景重复：不重复； } .content {宽度：90％; }页脚{宽度：100％； } nav {display：none; }

Answer 1

正如您在评论中所说，您使用css-validator.org。

当我在此处验证您的CSS（css-validator.org）时，它说它对CSS level 2.1进行了验证。从版本3开始，媒体查询不在CSS中，这就是为什么验证失败的原因。

如果您使用W3 CSS验证（jigsaw.w3.org/css-validator），则在验证CSS version 3 + SVG时不会显示任何错误

CSS媒体查询验证

1 个答案: