新增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;
}
}
但是，当我在浏览器中查看时，不工作。 什么是我的问题吗？ 我该如何解决呢？
（测试所有现代浏览器）
@media only screen有不同的定义@media screen 。
关键字“只有”还可以用来隐藏从旧的用户代理样式表。 用户代理必须处理媒体查询与“只有”开始，就好像“只有”关键字不存在。
来源： http://www.w3.org/TR/css3-mediaqueries/
也许你可以尝试改变这个：
@media screen and (min-width : 320px) and (max-width : 480px) {
.white span {
width: 100px;
}
}
您要查询device-width ，而如果你的笔记本电脑或台式机是不会解雇这些查询。 改变那些min-width ，你应该看到的查询工作。
此外，请确保你有一个viewport meta标签即<meta name="viewport" content="width=device-width,initial-scale=1.0">在<head>的HTML的。
