在样式。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)
其他回答
这三个技巧都很有用，但我似乎需要添加一个元标签:
<meta content="width=device-width, initial-scale=1" name="viewport" />
现在它似乎在Android(2.2)和iPhone上都能运行…
我最近也遇到了这个问题，后来我发现这是因为我没有在和和(之间加空格。 这就是错误
@media screen and(max-width:768px){
}
然后我把它改成了这个
@media screen and (max-width:768px){
}
对于每个人都有同样的问题，确保你实际上写了“120px”而不是只有“120”。这是我的错误，它让我发疯。
我也有同样的问题，原来我的媒体查询顺序是错误的。它们应该在CSS中从最宽到最小定义
我怀疑关键字可能是问题所在。我对使用这样的媒体查询没有问题:
@media screen and (max-width: 480px) {}
