在样式。css中,我使用媒体查询,这两者都使用的变体:

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

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

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

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

有人能告诉我正确的方向吗?


当前回答

对于每个人都有同样的问题,确保你实际上写了“120px”而不是只有“120”。这是我的错误,它让我发疯。

其他回答

我从未见过的奇怪原因:如果你在媒体查询之外使用“父>子”选择器(在Firefox 69中),它可能会破坏媒体查询。我不确定为什么会发生这种情况,但在我的场景中,这并不奏效……

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

但是添加父元素以匹配页面上方的其他CSS,这是可行的…

#parent > #child { display: none; }

似乎指定父类并不重要,因为id是非常具体的,不应该有歧义。也许是火狐浏览器的bug ?

我使用了一些方法。 在相同的样式表中,我使用:@media (max-width: 450px),或者单独的,确保你在标题中有正确的链接。我看了一下你的fixmeup,你有一个令人困惑的css链接数组。就像你说的,它也对HTC desire S起作用。

你唯一需要的解决方法是:

把所有的媒体查询放在。css文件的末尾

它起作用了,试试吧

我怀疑关键字可能是问题所在。我对使用这样的媒体查询没有问题:

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

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