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

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

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

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

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

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


当前回答

总是在一些单位中提到max-width和min-width,比如px或rem。这对我来说很好。如果我写它没有单位,只有数字值,浏览器不能读取媒体查询。例子: 这是错误的 @media only screen和(max-width:950) 和 这是对的 @media only screen (max-width:950px)

其他回答

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

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

然后我把它改成了这个

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

包含如下所示的元标记会导致浏览器对视口缩放的处理方式不同。

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

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

在html的头部部分添加下面标签

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

@media屏幕必须位于css的末尾,这一点很重要