Html 为什么我的 CSS3 媒体查询不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7859336/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why are my CSS3 media queries not working?
提问by redconservatory
In the styles.css, I am using media queries, both of which use a variation of:
在styles.css中，我使用了媒体查询，两者都使用了以下变体：
/*--[ Normal CSS styles ]----------------------------------*/
@media only screen and (max-width: 767px) {
/*--[ Mobile styles go here]---------------------------*/
}
The sites resize to the layout I want in a regular browser (Safari, Firefox) when I shrink the window, however, the mobile layout isn't shown at all on a phone. Instead, I just see the default CSS.
当我缩小窗口时，网站会在常规浏览器（Safari、Firefox）中调整为我想要的布局，但是，手机上根本不显示移动布局。相反，我只看到默认的 CSS。
Can anyone point me in the right direction?
任何人都可以指出我正确的方向吗？
回答by redconservatory
All three of these were helpful tips, but it looks like I needed to add a meta tag:
所有这三个都是有用的提示，但看起来我需要添加一个元标记：
<meta content="width=device-width, initial-scale=1" name="viewport" />
Now it seems to work in both Android (2.2) and iPhone all right...
现在它似乎在 Android (2.2) 和 iPhone 上都可以正常工作......
回答by The4thIceman
Don't forget to have the standard css declarations abovethe media query or the query won't work either.
不要忘记在媒体查询上方使用标准 css 声明，否则查询也将不起作用。
.edcar_letter{
font-size:180px;
}
@media screen and (max-width: 350px) {
.edcar_letter{
font-size:120px;
}
}
回答by Moin Zaman
I suspect the keyword onlymay be the issue here. I have no issues using media queries like this:
我怀疑关键字only可能是这里的问题。我使用这样的媒体查询没有问题：
@media screen and (max-width: 480px) { }
@media screen and (max-width: 480px) { }
回答by Mohsen
i used bootstrap in a press site but it does not worked on IE8, i used css3-mediaqueries.js javascript but still not working. if you want your media query to work with this javascript file add screen to your media query line in css
我在新闻网站上使用了引导程序，但它在 IE8 上不起作用，我使用了 css3-mediaqueries.js javascript 但仍然无法工作。如果您希望您的媒体查询与此 javascript 文件一起使用，请在 css 中将屏幕添加到您的媒体查询行
here is an example :
这是一个例子：
<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 Link line as simple as above line.
css 链接行和上面的行一样简单。
回答by dklog79
Today I had similar situation. Media query did not work. After a while I found that space after 'and' was missing. Proper media query should look like this:
今天我也遇到了类似的情况。媒体查询不起作用。过了一会儿，我发现“and”后面的空格不见了。正确的媒体查询应如下所示：
@media screen and (max-width: 1024px) {}
回答by X.C.
The sequential order of css code also matters, for example:
css 代码的顺序也很重要，例如：
@media(max-width:600px){
.example-text{
color:red;
}
}
.example-text{
color:blue;
}
the above code will not working because the executed order. Need to write as following：
上面的代码将不起作用，因为执行的顺序。需要写成如下：
.example-text{
color:blue;
}
@media(max-width:600px){
.example-text{
color:red;
}
}
回答by ANURAG BHAKUNI
Always mention max-width and min-width in some unit like px or rem. This figured it out for me. If I write it without the unit and only the number value, browser can't read the media queries. example: this is wrong@media only screen and (max-width:950) and this is right@media only screen and (max-width:950px)
始终以 px 或 rem 等单位提及 max-width 和 min-width。这对我来说想通了。如果我在没有单位而只有数值的情况下编写它，浏览器将无法读取媒体查询。例如： 这是错误的@media only screen and (max-width:950) 这是正确的@media only screen and (max-width:950px)
回答by Seth
Throwing another answer into the ring. If you're trying to use CSS variables, then it will quietly fail.
将另一个答案扔进戒指。如果您尝试使用 CSS 变量，那么它会悄悄地失败。
@media screen and (max-device-width: var(--breakpoint-small)) {}
CSS variables don't work in media queries (by design).
CSS 变量在媒体查询中不起作用（按设计）。
回答by Cameron Donahue
The OP's code snippet clearly uses the correct comment markup but CSS can break in a progressive way — so, if there's a syntax error, everything after that is likely to fail. A couple times I've relied on trustworthy sources that supplied incorrect comment markupthat broke my style sheet. Since the OP provided just a small section of their code, I'd suggest the following:
OP 的代码片段显然使用了正确的注释标记，但 CSS 可能会以渐进的方式中断 - 因此，如果出现语法错误，之后的所有内容都可能会失败。有几次我依赖可信赖的来源，这些来源提供了错误的评论标记，破坏了我的样式表。由于 OP 只提供了一小部分代码，我建议如下：
Make sure all of your CSS comments use this markup /*... */-- which is the correct comment markup for css according to MDN
确保您的所有 CSS 注释都使用此标记/*... */--根据 MDN，这是 css 的正确注释标记
Validate your css with a linter or a secure online validator. Here's one by W3
使用 linter 或安全的在线验证器验证您的 css。这是 W3 的一张
More info:
I went to check the latest recommended media query breakpoints from bootstrap 4 and ended up copying the boiler plate straight from their docs. Almost every code block was labeled with javascript-style comments //, which broke my code — and gave me only cryptic compile errors with which to troubleshoot, which went over my head at the time and caused me sadness.
更多信息：我去检查了 bootstrap 4 中最新推荐的媒体查询断点，最后直接从他们的文档中复制了样板文件。几乎每个代码块都标有 javascript 风格的注释//，这破坏了我的代码——并且只给了我一些神秘的编译错误来进行故障排除，这在当时让我无法理解并让我感到悲伤。
IntelliJ text editor allowed me to comment out specific lines of css in a LESS file using the ctrl+/ hotkey which was great except it inserts //by default on unrecognized file types. It isn't freeware and less is fairly mainstream so I trusted it and went with it. That broke my code. There's a preference menu for teaching it the correct comment markup for each filetype.
IntelliJ 文本编辑器允许我使用 ctrl+/ 热键在 LESS 文件中注释掉特定的 css 行，这很棒，但它//默认插入到无法识别的文件类型。它不是免费软件，而且不太主流，所以我信任它并使用它。那破坏了我的代码。有一个首选项菜单可以教它为每种文件类型正确的注释标记。
回答by PJ Brunet
Weird reason I've never seen before: If you're using a "parent > child" selector outside of the media query (in Firefox 69) it could break the media query. I'm not sure why this happens, but for my scenario this did not work...
我以前从未见过的奇怪原因：如果您在媒体查询（在 Firefox 69 中）之外使用“父 > 子”选择器，它可能会破坏媒体查询。我不确定为什么会发生这种情况，但是对于我的情况，这不起作用......
@media whatever {
#child { display: none; }
}
But adding the parent to match some other CSS further up the page, this works...
但是添加父级以匹配页面上的其他一些 CSS，这有效......
#parent > #child { display: none; }
Seems like specifying the parent should not matter, since an id is very specific and there should be no ambiguity. Maybe it's a bug in Firefox?
似乎指定父级应该无关紧要，因为 id 非常具体，应该没有歧义。也许这是 Firefox 中的错误？
