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声明，否则查询也无法正常工作。

let $test-data := (
  <priority>
    <data>hello</data>
  </priority>,
  <status>
    <data>hi</data>
  </status>
)
return
(
  xdmp:document-set-properties("/test.xml", $test-data),
  xdmp:document-set-properties("/test2.xml", $test-data)
)

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

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

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

Answer 6

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

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

Answer 7

@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 8

确保您的css评论全部使用此标记/* ... */ - which is the correct comment markup for css according to MDN

我直接从他们的文档中复制了bootstrap 4媒体查询，并且每个查询都标有相同的javascript样式注释标记//！

此外，IntelliJ文本编辑器允许我在LESS文件中注释掉特定的css行，但自动使用//。它不是免费软件所以我认为它是正确的。有一个偏好菜单可以纠正这种行为。

此外，使用值得信赖的在线验证器验证您的CSS。 Here's one by W3

Answer 9

由于没有拼写错误对我不起作用 @media screen and(max-width: 930px) 需要在 (and) & 左括号@media screen 和 (max-width: 930px) 之间留出空间

Answer 10

我使用了一些方法。在我使用的相同样式表中：@media（max-width：450px），或单独确保正确地在标题中有链接。我查看了你的fixmeup，你有一个令人困惑的css链接数组。它就像你对HTC欲望S的说法一样。

Answer 11

对于遇到相同问题的每个人，请确保您实际上写的是“ 120px”而不是“ 120px”。这是我的错误，这使我发疯。

Answer 12

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

Answer 13

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 14

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

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

但是在页面的上方添加父项以匹配其他CSS，这是可行的...

#parent > #child { display: none; }

似乎没有必要指定父对象，因为id是非常特定的，应该没有歧义。也许这是Firefox中的错误？

Answer 15

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

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

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

Answer 16

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

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

然后我将其更改为更正

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

Answer 17

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

Answer 18

对我来说，我曾指出max-height而不是max-width。

如果是你，请改变它！

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

Answer 19

嗯，在我的例子中，宽度值后面的 px 丢失了......有趣的是，W3C validator 甚至没有注意到这个错误，只是默默地忽略了定义。

Answer 20

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

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

20 个答案: