在样式。css中，我使用媒体查询，这两者都使用的变体:
/*--[ Normal CSS styles ]----------------------------------*/
@media only screen and (max-width: 767px) {
/*--[ Mobile styles go here]---------------------------*/
}
当我缩小窗口时，网站大小会调整到我在常规浏览器(Safari, Firefox)中想要的布局，然而，手机上根本不会显示移动布局。相反，我只看到默认的CSS。
有人能告诉我正确的方向吗?
当前回答
我从未见过的奇怪原因:如果你在媒体查询之外使用“父>子”选择器(在Firefox 69中)，它可能会破坏媒体查询。我不确定为什么会发生这种情况，但在我的场景中，这并不奏效……
@media whatever {
#child { display: none; }
}
但是添加父元素以匹配页面上方的其他CSS，这是可行的…
#parent > #child { display: none; }
似乎指定父类并不重要，因为id是非常具体的，不应该有歧义。也许是火狐浏览器的bug ?
其他回答
又给了我一个答案。如果你试图使用CSS变量，那么它会悄悄地失败。
@media screen and (max-device-width: var(--breakpoint-small)) {}
CSS变量在媒体查询中不起作用(根据设计)。
我使用了一些方法。 在相同的样式表中，我使用:@media (max-width: 450px)，或者单独的，确保你在标题中有正确的链接。我看了一下你的fixmeup，你有一个令人困惑的css链接数组。就像你说的，它也对HTC desire S起作用。
今天我也遇到了类似的情况。媒体查询无法工作。过了一会儿，我发现“and”后面的空格不见了。 正确的媒体查询应该是这样的:
@media screen and (max-width: 1024px) {}
嗯，在我的例子中，width值后面的px缺失了……有趣的是，W3C验证器甚至没有注意到这个错误，只是默默地忽略了这个定义。
我怀疑关键字可能是问题所在。我对使用这样的媒体查询没有问题:
@media screen and (max-width: 480px) {}
