在样式。css中，我使用媒体查询，这两者都使用的变体:
/*--[ Normal CSS styles ]----------------------------------*/
@media only screen and (max-width: 767px) {
/*--[ Mobile styles go here]---------------------------*/
}
当我缩小窗口时，网站大小会调整到我在常规浏览器(Safari, Firefox)中想要的布局，然而，手机上根本不会显示移动布局。相反，我只看到默认的CSS。
有人能告诉我正确的方向吗?
当前回答
我怀疑关键字可能是问题所在。我对使用这样的媒体查询没有问题:
@media screen and (max-width: 480px) {}
其他回答
我最近也遇到了这个问题，后来我发现这是因为我没有在和和(之间加空格。 这就是错误
@media screen and(max-width:768px){
}
然后我把它改成了这个
@media screen and (max-width:768px){
}
由于只有不是打字错误，不适合我 @media屏幕和(max-width: 930px)需要在(和)和开始括号之间留有空间
包含如下所示的元标记会导致浏览器对视口缩放的处理方式不同。
<meta content="width=device-width, initial-scale=1" name="viewport" />
@media屏幕必须位于css的末尾，这一点很重要
如果浏览器缩放级别不正确，也可能发生这种情况。您的浏览器窗口缩放应该是100%。在Chrome中使用Ctrl + 0重置缩放级别。
