在 index.html 中添加了这一行：
<link href="css/style.css" media="all "rel="stylesheet" type="text/css" />
这是我的媒体查询 CSS：
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#mapArea .white span {
width: 100px;
}
}
但是当我在浏览器中检查它时，它不起作用。我的问题是什么？我该如何解决？
（测试了所有现代浏览器）
您正在查询device-width，如果您在笔记本电脑或台式机上不会触发这些查询。将它们更改为min-width，您应该会看到查询工作。
此外，请确保您有一个viewport元标记，即<meta name="viewport" content="width=device-width,initial-scale=1.0">在<head>您的 HTML 中。
@media only screen与 有不同的定义@media screen。
关键字“only”也可以用来隐藏旧用户代理的样式表。用户代理必须处理以“only”开头的媒体查询，就好像“only”关键字不存在一样。
来源：http ://www.w3.org/TR/css3-mediaqueries/
也许您可以尝试更改为：
@media screen and (min-width : 320px) and (max-width : 480px) {
.white span {
width: 100px;
}
}