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

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

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

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

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

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


当前回答

又给了我一个答案。如果你试图使用CSS变量,那么它会悄悄地失败。

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

CSS变量在媒体查询中不起作用(根据设计)。

其他回答

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

我也有同样的问题,原来我的媒体查询顺序是错误的。它们应该在CSS中从最宽到最小定义

嗯,在我的例子中,width值后面的px缺失了……有趣的是,W3C验证器甚至没有注意到这个错误,只是默默地忽略了这个定义。

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

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

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

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

它起作用了,试试吧