在样式。css中，我使用媒体查询，这两者都使用的变体:
/*--[ Normal CSS styles ]----------------------------------*/
@media only screen and (max-width: 767px) {
/*--[ Mobile styles go here]---------------------------*/
}
当我缩小窗口时，网站大小会调整到我在常规浏览器(Safari, Firefox)中想要的布局，然而，手机上根本不会显示移动布局。相反，我只看到默认的CSS。
有人能告诉我正确的方向吗?
当前回答
我也有同样的问题，原来我的媒体查询顺序是错误的。它们应该在CSS中从最宽到最小定义
其他回答
OP的代码片段显然使用了正确的注释标记，但CSS可能会以渐进的方式中断——因此，如果有语法错误，在此之后的所有内容都可能失败。有几次，我依赖可靠的来源提供了错误的注释标记，破坏了我的样式表。由于OP只提供了他们代码的一小部分，我建议如下:
确保你所有的CSS注释都使用这个标记/*…*/——这是根据MDN的css正确的注释标记
使用linter或安全的在线验证器验证您的css。这是W3边的
更多信息: 我从bootstrap 4中查看了最新的推荐媒体查询断点，结果直接从他们的文档中复制了锅炉盘。几乎每个代码块都标记了javascript风格的注释//，这破坏了我的代码-并且只给了我一些神秘的编译错误来进行故障排除，当时我无法理解，这让我感到悲伤。
IntelliJ文本编辑器允许我在LESS文件中使用ctrl+/热键注释掉特定的css行，这很棒，除了它默认地在无法识别的文件类型上插入//。它不是免费软件，更少是相当主流的，所以我相信它，并使用它。这打破了我的准则。有一个首选项菜单，用于教它为每种文件类型设置正确的注释标记。
今天我也遇到了类似的情况。媒体查询无法工作。过了一会儿，我发现“and”后面的空格不见了。 正确的媒体查询应该是这样的:
@media screen and (max-width: 1024px) {}
总是在一些单位中提到max-width和min-width，比如px或rem。这对我来说很好。如果我写它没有单位，只有数字值，浏览器不能读取媒体查询。例子: 这是错误的 @media only screen和(max-width:950) 和 这是对的 @media only screen (max-width:950px)
又给了我一个答案。如果你试图使用CSS变量，那么它会悄悄地失败。
@media screen and (max-device-width: var(--breakpoint-small)) {}
CSS变量在媒体查询中不起作用(根据设计)。
对我来说，我用max-height代替了max-width。
如果那是你，去改变它!
@media screen and (max-width: 350px) { // Not max-height
.letter{
font-size:20px;
}
}
