Question

这必须是一个非常简单的东西，它正在发挥作用。我正在玩css3媒体电话来建立一个响应式网站，并且不能为我的生活看到为什么以下不再起作用。

这里是页面代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>

<link href="assets/css/layout.css" rel="stylesheet" type="text/css">
</head>

<body>
</body>
</html>

layout.css：

body {
background-color:#FFF;
}

@media screen and max-width 980px {
body {
background-color:aqua;
}
}

@media screen and max-width 700px {
body {
background-color:#ff4500;
}
}

@media screen and max-width 480px {
body {
background-color:#ffd700;
}
}

这有什么问题？

感谢。

Answer 1

我注意到您的媒体查询中存在一些格式问题;请尝试使用此格式：

@media screen and (max-width: 700px) {

    ...

}

Answer 2

在body标签中加入一些东西。因为它是空的，所以没有显示。

CSS3媒体呼叫无法正常工作

2 个答案: