在样式。css中，我使用媒体查询，这两者都使用的变体:
/*--[ Normal CSS styles ]----------------------------------*/
@media only screen and (max-width: 767px) {
/*--[ Mobile styles go here]---------------------------*/
}
当我缩小窗口时，网站大小会调整到我在常规浏览器(Safari, Firefox)中想要的布局，然而，手机上根本不会显示移动布局。相反，我只看到默认的CSS。
有人能告诉我正确的方向吗?
当前回答
对于每个人都有同样的问题，确保你实际上写了“120px”而不是只有“120”。这是我的错误，它让我发疯。
其他回答
由于只有不是打字错误，不适合我 @media屏幕和(max-width: 930px)需要在(和)和开始括号之间留有空间
我最近也遇到了这个问题，后来我发现这是因为我没有在和和(之间加空格。 这就是错误
@media screen and(max-width:768px){
}
然后我把它改成了这个
@media screen and (max-width:768px){
}
我从未见过的奇怪原因:如果你在媒体查询之外使用“父>子”选择器(在Firefox 69中)，它可能会破坏媒体查询。我不确定为什么会发生这种情况，但在我的场景中，这并不奏效……
@media whatever {
#child { display: none; }
}
但是添加父元素以匹配页面上方的其他CSS，这是可行的…
#parent > #child { display: none; }
似乎指定父类并不重要，因为id是非常具体的，不应该有歧义。也许是火狐浏览器的bug ?
对我来说，我用max-height代替了max-width。
如果那是你，去改变它!
@media screen and (max-width: 350px) { // Not max-height
.letter{
font-size:20px;
}
}
我在一个新闻网站上使用bootstrap，但它在IE8上不起作用，我使用css3-mediaqueries.js javascript，但仍然不起作用。如果你想让你的媒体查询与这个javascript文件一起工作，在CSS中添加screen到你的媒体查询行
这里有一个例子:
<meta name="viewport" content="width=device-width" />
<style>
@media screen and (max-width:900px) {}
@media screen and (min-width:900px) and (max-width:1200px) {}
@media screen and (min-width:1200px) {}
</style>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>
css链接行简单如上行。
