为什么我的CSS3媒体查询不能在移动设备上工作?

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

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


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


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

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

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

440657 次浏览
小开

我使用一些方法取决于。 在相同的样式表中，我使用:@media (max-width: 450px)，或者单独的，确保你在标题中有正确的链接。我看了一下你的fixmeup，你有一个令人困惑的css链接数组。它也像你说的那样在HTC desire s上起作用。

小开

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

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

小开
最佳答案

这三个技巧都很有用，但我似乎需要添加一个元标签:

<meta content="width=device-width, initial-scale=1" name="viewport" />

现在它似乎在Android(2.2)和iPhone上都能运行…

小开

我在一个新闻网站上使用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链接行简单如上行。

小开 
@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;
}
小开
今天我也遇到了类似的情况。媒体查询无法工作。过了一会儿，我发现“and”后面的空格不见了。 正确的媒体查询应该是这样的:

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

别忘了有标准的css声明以上媒体查询，否则查询也不会工作。

.edcar_letter{
font-size:180px;
}


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

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

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

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

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

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

小开

对我来说，我已经指明了max-height而不是max-width。

如果那是你，去改变它!

    @media screen and (max-width: 350px) {    // Not max-height
.letter{
font-size:20px;
}
}
小开

如果浏览器缩放级别不正确，也可能发生这种情况。您的浏览器窗口缩放应该是100%。在Chrome中使用Ctrl + 0重置缩放级别。

小开
我最近也遇到了这个问题，后来我发现这是因为我没有在and和(之间放置空格。 这是错误

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

然后我把它改成了这个

@media screen and (max-width:768px){
}
小开

又给了我一个答案。如果你试图使用CSS变量，那么它会悄悄地失败。

@media screen and (max-device-width: var(--breakpoint-small)) {}

CSS变量在媒体查询中不起作用(根据设计)。

小开

我从未见过的奇怪原因:如果你在媒体查询之外使用“父>子”选择器(在Firefox 69中)，它可能会破坏媒体查询。我不确定为什么会发生这种情况，但在我的场景中，这并不奏效……

@media whatever {
#child { display: none; }
}

但是添加父元素以匹配页面上方的其他CSS，这是可行的…

#parent > #child { display: none; }

似乎指定父类并不重要，因为id是非常具体的，不应该有歧义。也许是火狐浏览器的bug ?

小开

css代码的顺序也很重要，例如:

@media(max-width:600px){
.example-text{
color:red;
}
}
.example-text{
color:blue;
}

上面的代码将不能工作，因为执行的命令。需要写如下:

.example-text{
color:blue;
}
@media(max-width:600px){
.example-text{
color:red;
}
}
小开
总是在一些单位中提到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" />

小开

对于每个人都有同样的问题，确保你确实写了“120px”;而不是只有“120";这是我的错误，它让我发疯。

小开

嗯，在我的例子中，width值后面的px丢失了…有趣的是，W3C验证器甚至没有注意到这个错误，只是默默地忽略了这个定义。

小开

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

小开

由于只有不是打字错误，不适合我 @media屏幕和(max-width: 930px)需要在(和)&@媒体屏幕和(max-width: 930px)

小开

你唯一需要的解决方法是:

把所有的媒体查询放在。css文件的末尾

它起作用了，试试吧

小开

@media屏幕必须位于css的末尾，这一点很重要

小开

在html的头部部分添加下面标签

<meta content="width=device-width, initial-scale=1" name="viewport" />


提交答案