Question

在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;
     }

}

但是当我在浏览器中检查它时，请不要工作。我的问题是什么？我该如何解决？

（测试了所有现代浏览器）

Answer 1

您正在查询device-width，如果您在笔记本电脑或台式机上不会触发这些查询。将这些更改为min-width，您应该会看到查询有效。

另外，请确保您的HTML viewport中有一个<meta name="viewport" content="width=device-width,initial-scale=1.0">元标记，即<head>。

Answer 2

@media only screen与@media screen有不同的定义。

关键字“only”也可用于隐藏旧版的样式表用户代理。用户代理必须处理以...开头的媒体查询 “仅”，好像“唯一”关键字不存在一样。

来源：http://www.w3.org/TR/css3-mediaqueries/

也许你可以尝试改变这个：

@media screen and (min-width : 320px) and (max-width : 480px) {
  .white span {
      width: 100px;
  }
}

CSS Media Query无法在css文件中运行

2 个答案: