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

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

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

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

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

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


当前回答

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

其他回答

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

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

它起作用了,试试吧

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

今天我也遇到了类似的情况。媒体查询无法工作。过了一会儿,我发现“and”后面的空格不见了。 正确的媒体查询应该是这样的:

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

由于只有不是打字错误,不适合我 @media屏幕和(max-width: 930px)需要在(和)和开始括号之间留有空间

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

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