在样式。css中,我使用媒体查询,这两者都使用的变体:

/*--[ Normal CSS styles ]----------------------------------*/

@media only screen and (max-width: 767px) {

    /*--[ Mobile styles go here]---------------------------*/
}

当我缩小窗口时,网站大小会调整到我在常规浏览器(Safari, Firefox)中想要的布局,然而,手机上根本不会显示移动布局。相反,我只看到默认的CSS。

有人能告诉我正确的方向吗?


当前回答

OP的代码片段显然使用了正确的注释标记,但CSS可能会以渐进的方式中断——因此,如果有语法错误,在此之后的所有内容都可能失败。有几次,我依赖可靠的来源提供了错误的注释标记,破坏了我的样式表。由于OP只提供了他们代码的一小部分,我建议如下:

确保你所有的CSS注释都使用这个标记/*…*/——这是根据MDN的css正确的注释标记

使用linter或安全的在线验证器验证您的css。这是W3边的

更多信息: 我从bootstrap 4中查看了最新的推荐媒体查询断点,结果直接从他们的文档中复制了锅炉盘。几乎每个代码块都标记了javascript风格的注释//,这破坏了我的代码-并且只给了我一些神秘的编译错误来进行故障排除,当时我无法理解,这让我感到悲伤。

IntelliJ文本编辑器允许我在LESS文件中使用ctrl+/热键注释掉特定的css行,这很棒,除了它默认地在无法识别的文件类型上插入//。它不是免费软件,更少是相当主流的,所以我相信它,并使用它。这打破了我的准则。有一个首选项菜单,用于教它为每种文件类型设置正确的注释标记。

其他回答

我怀疑关键字可能是问题所在。我对使用这样的媒体查询没有问题:

@media screen and (max-width: 480px) {}

由于只有不是打字错误,不适合我 @media屏幕和(max-width: 930px)需要在(和)和开始括号之间留有空间

我也有同样的问题,原来我的媒体查询顺序是错误的。它们应该在CSS中从最宽到最小定义

今天我也遇到了类似的情况。媒体查询无法工作。过了一会儿,我发现“and”后面的空格不见了。 正确的媒体查询应该是这样的:

@media screen and (max-width: 1024px) {}

不要忘记在媒体查询上面有标准的css声明,否则查询也不会工作。

.edcar_letter{
    font-size:180px;
}

@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }
}