为什么我的CSS3媒体查询无法在移动设备上运行？

Question

在styles.css中,我使用的是媒体查询,两者都使用以下变体:

/*--[ Normal CSS styles ]----------------------------------*/

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

    /*--[ Mobile styles go here]---------------------------*/
}

当我缩小窗口时,网站会在常规浏览器(Safari,Firefox)中调整我想要的布局,但是,手机上根本不会显示移动布局.相反,我只看到默认的CSS.

谁能指出我正确的方向？

Answer 1

所有这三个都是有用的提示,但看起来我需要添加一个元标记:

<meta content="width=device-width, initial-scale=1" name="viewport" />

现在它似乎适用于Android(2.2)和iPhone都可以......

Answer 2

不要忘记在媒体查询之上使用标准的css声明,否则查询也将无效.

.edcar_letter{
    font-size:180px;
}

@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }
}

Answer 3

我怀疑关键字only可能是这里的问题.我没有使用像这样的媒体查询的问题:

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

Answer 4

我在新闻网站上使用了bootstrap,但它在IE8上不起作用,我使用css3-mediaqueries.js javascript但仍然无法正常工作.如果您希望媒体查询使用此javascript文件添加屏幕到css中的媒体查询行

这是一个例子:

<meta name="viewport" content="width=device-width" />


<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>

css链接线就像上面一行一样简单.

Answer 5

包含如下所示的元标记会导致浏览器以不同方式处理视口缩放。

<meta content="width=device-width, initial-scale=1" name="viewport" />

Answer 6

今天我有类似的情况.媒体查询无效.过了一会儿,我发现'和'之后的空间丢失了.适当的媒体查询应如下所示:

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

Answer 7

css 代码的顺序也很重要，例如：

@media(max-width:600px){
  .example-text{
     color:red;
   }
}
.example-text{
   color:blue;
}

上面的代码将不起作用，因为执行的顺序。需要写成如下吗？

.example-text{
   color:blue;
}
@media(max-width:600px){
  .example-text{
     color:red;
   }
}

Answer 8

始终以 px 或 rem 等单位提及 max-width 和 min-width。这对我来说想通了。如果我在没有单位而只有数值的情况下编写它，浏览器将无法读取媒体查询。例如： 这是错误的 @media only screen and (max-width:950) 这是正确的 @media only screen and (max-width:950px)