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

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

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

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

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

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


当前回答

不要忘记在媒体查询上面有标准的css声明,否则查询也不会工作。

.edcar_letter{
    font-size:180px;
}

@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }
}

其他回答

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

不要忘记在媒体查询上面有标准的css声明,否则查询也不会工作。

.edcar_letter{
    font-size:180px;
}

@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }
}

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

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

然后我把它改成了这个

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

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

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

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

它起作用了,试试吧