/*--[ Normal CSS styles ]----------------------------------*/
@media only screen and (max-width: 767px) {
/*--[ Mobile styles go here]---------------------------*/
}
在常规浏览器（Safari、Firefox）中，当我缩小窗口时，网站会按照我想要的布局进行调整大小，然而，在手机上根本没有显示移动端的布局。相反，我只看到默认的CSS。
有人能指点一下我应该怎么做吗？
我最近也遇到了这个问题，后来发现是因为我在and和(之间没有加空格导致的。这就是错误的原因。
@media screen and(max-width:768px){
}
然后我将其更改为以下内容以进行更正
@media screen and (max-width:768px){
}
Ctrl + 0重置缩放级别。"最初的回答"在这里提供另一个答案。如果您试图使用 CSS 变量，那么它将会静默地失败。
翻译后：Throwing another answer into the ring. 如果你想使用CSS变量，它将会悄悄地失败。
@media screen and (max-device-width: var(--breakpoint-small)) {}
CSS变量在媒体查询中不起作用（设计上如此）。
注：原回答为"Original Answer"。
我从未见过的奇怪原因：如果你在媒体查询之外使用“父级 > 子级”选择器（在Firefox 69中），它可能会破坏媒体查询。我不确定为什么会发生这种情况，但对于我的情况，这种方法不起作用...
@media whatever {
#child { display: none; }
}
#parent > #child { display: none; }
似乎指定父级不应该影响结果，因为ID非常具体，不应该存在歧义。也许这是Firefox的一个bug？
在编写 CSS 时，@media screen 必须放在最后面是非常重要的。
@media all and (max-width:320px)and(min-width:0px) {
#container {
width: 100%;
}
sty {
height: 50%;
width: 100%;
text-align: center;
margin: 0;
}
}
.username {
margin-bottom: 20px;
margin-top: 10px;
}
你们需要的唯一解决方案是：
将所有媒体查询放在 .CSS 文件的末尾
它有效，试试吧
由于只是拼写错误，导致代码无法正常工作。在@media screen and (max-width: 930px)中，需要在(and)和开括号之间加上空格，即@media screen and (max-width: 930px)。
我使用几种不同的方法。在同一个样式表中，我使用@media (max-width: 450px)；或者如果是分开的话，请确保头部链接正确。我看了一下你的fixmeup网站，发现你有一堆混乱的CSS链接。这也会影响到HTC Desire S。
<meta name="viewport" content="width=device-width, initial-scale=1" />