为什么我的 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

今天我也遇到了类似的情况。媒体查询不起作用。过了一会儿，我发现“and”后面的空格不见了。
正确的媒体查询应该如下所示：

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

Answer 6

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 7

始终以 px 或 rem 等单位提及最大宽度和最小宽度。这对我来说已经解决了。如果我写的内容没有单位而只有数字值，浏览器将无法读取媒体查询。例子：
这是错误的
@media only 屏幕和（最大宽度：950）
和
这是正确的
@media only 屏幕和（最大宽度：950px）

Answer 8

在 html 的 head 部分添加以下标签

Answer 9

OP 的代码片段显然使用了正确的注释标记，但 CSS 可能会以渐进的方式中断 - 因此，如果存在语法错误，则之后的所有内容都可能会失败。有几次，我依赖于可靠的来源，这些来源提供了不正确的注释标记，从而破坏了我的样式表。由于OP只提供了一小部分代码，我建议如下：

确保所有CSS注释都使用此标记/* ... */< /code> -- 根据 MDN，这是正确的 css 注释标记

验证你的 CSS 带有 linter 或安全的在线验证器。 这是 W3 的一个

更多信息：
我去检查 Bootstrap 4 中最新推荐的媒体查询断点，最后直接从他们的文档中复制了样板。几乎每个代码块都标有 javascript 风格的注释 //，这破坏了我的代码，并且只给了我一些神秘的编译错误来进行故障排除，这在当时超出了我的想象，让我感到悲伤。

IntelliJ 文本编辑器允许我使用 ctrl+/ 热键注释掉 LESS 文件中的特定 css 行，这很棒，除了它默认在无法识别的文件类型上插入//。它不是免费软件，而且 less 是相当主流的，所以我信任它并使用它。这破坏了我的代码。有一个首选项菜单可以教它为每种文件类型正确的注释标记。

Answer 10

我最近也遇到了这个问题，后来发现是因为我在 and 和 ( 之间没有加空格。
这是错误

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

然后我将其更改为此以纠正它

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

Answer 11

如果浏览器缩放级别不正确，也可能会发生这种情况。您的浏览器窗口缩放应为 100%。在 Chrome 中，使用 Ctrl + 0 重置缩放级别。

Answer 12

将另一个答案扔进戒指。如果您尝试使用 CSS 变量，那么它会悄然失败。

@media screen and (max-device-width: var(--breakpoint-small)) {}

CSS 变量在媒体查询中不起作用（按设计）。

Answer 13

我以前从未见过的奇怪原因：如果您在媒体查询之外使用“父>子”选择器（在 Firefox 69 中），它可能会破坏媒体查询。我不确定为什么会发生这种情况，但对于我的场景来说，这不起作用...

@media whatever {
    #child { display: none; }
}

但是添加父级以匹配页面上的其他一些 CSS，这有效...

#parent > #child { display: none; }

似乎指定父级应该不重要，因为id 非常具体，不应该有歧义。也许这是 Firefox 的一个错误？

Answer 14

重要的是@media屏幕必须位于css的末尾

Answer 15

我根据情况使用几种方法。
在同一个样式表中，我使用：@media（最大宽度：450px），或者单独确保标题中的链接正确。我查看了你的 fixmeup，你发现了一系列令人困惑的 css 链接。它在 HTC Desire S 上也按您所说的方式运行。

Answer 16

@media all and (max-width:320px)and(min-width:0px) {
  #container {
    width: 100%;
  }
  sty {
    height: 50%;
    width: 100%;
    text-align: center;
    margin: 0;
  }
}

.username {
  margin-bottom: 20px;
  margin-top: 10px;
}

Answer 17

由于仅不是拼写错误，对我不起作用
@media screen and(max-width: 930px) 需要在 (and) & 之间留有空间左括号@media screen 和（最大宽度：930px）

Answer 18

您唯一需要的解决办法是：

只需在 .CSS 文件末尾获取所有媒体查询

它有效，尝试一下

Answer 19

对我来说，我指定了 max-height 而不是 max-width。

如果是你，那就去改变吧！

    @media screen and (max-width: 350px) {    // Not max-height
        .letter{
            font-size:20px;
        }
    }

Answer 20

对于遇到同样问题的每个人，请确保您确实写了“120px”，而不是仅写了“120”。这是我的错误，它让我发疯。

Answer 21

好吧，就我而言，宽度值后面的 px 丢失了......有趣的是， W3C验证器甚至没有注意到这个错误，只是默默地忽略了这个定义。

Answer 22

我遇到了同样的问题，结果发现我的媒体查询顺序错误。它们应该在 CSS 中从最宽到最小来定义