为什么我的CSS3媒体查询不起作用？

在styles.css中，我正在使用媒体查询，这两个查询都使用以下变体：

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

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

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

当我缩小窗口时，网站的大小会调整为我希望在常规浏览器（Safari，Firefox）中使用的布局，但是，手机上的移动布局根本无法显示。相反，我只是看到默认的CSS。

谁能指出我正确的方向？

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

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

现在它似乎可以同时在Android（2.2）和iPhone上使用...

不要忘记在媒体查询上方使用标准的CSS声明，否则该查询也不起作用。

.edcar_letter{
    font-size:180px;
}

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

我怀疑关键字only可能是这里的问题。使用这样的媒体查询，我没有任何问题：

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

我在新闻网站上使用了引导程序，但在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链接线和上面的线一样简单。

今天我也有类似情况。媒体查询无效。过了一会儿，我发现'and'之后的空格丢失了。正确的媒体查询应如下所示：

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

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

始终以px或rem等单位提及max-width和min-width。这为我解决了。如果我写的时候没有单位，只有数字值，浏览器将无法读取媒体查询。示例： 这是错误的 @media only屏幕和（max-width：950）， 这是正确的 @media only屏幕和（max-width：950px）

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

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

CSS变量不适用于媒体查询（根据设计）。

我从未见过的奇怪原因：如果您在媒体查询（在Firefox 69中）之外使用“父>子”选择器，则可能会中断媒体查询。我不确定为什么会发生这种情况，但是对于我的情况，这没有用...

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

但是，将父级添加到页面上进一步匹配其他一些CSS的情况下，这是可行的...

#parent > #child { display: none; }

好像指定父级似乎无关紧要，因为id是非常特定的，应该没有歧义。也许这是Firefox中的错误？

OP的代码段显然使用了正确的注释标记，但是CSS可能会以渐进方式中断—因此，如果出现语法错误，此后的所有操作都可能会失败。有几次，我依靠可信赖的消息来源提供了错误的注释标记，这打乱了我的样式表。由于OP仅提供了其代码的一小部分，因此我建议以下内容：

确保所有的CSS注释使用这个标记/*...... */- 这是根据MDN对CSS的正确注释标记

使用lint或安全的在线验证器验证您的css。这是W3的一部

更多信息：我去检查了引导程序4中最新推荐的媒体查询断点，最终直接从他们的文档中复制了样板。几乎每个代码块都标有javascript样式的注释//，这破坏了我的代码—并给了我仅用于进行疑难解答的神秘编译错误，这些错误当时使我头疼不已。

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

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

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

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

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

然后我将其更改为此进行更正

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

我使用几种方法视情况而定。在同一样式表中，我使用：@media（最大宽度：450像素），或者单独使用，确保您在标题中具有正确的链接。我看了看一下您的fixmeup，发现您有一系列混乱的CSS链接。就像您所说的那样，它对HTC的愿望S也有作用。

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

对我来说，我表示的max-height不是max-width。

如果是您，请更改它！

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

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