blocks|key|4562005|text|你有没有让iframe(或者modals或者更小的窗口)在你的媒体查询中加载相同的CSS表？如果是这种情况，则是缓存问题，您需要使用哑巴参数链接CSS文件，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4562006|<link+href="myCss.css?iframe=1"+/>|code-block|syntax|javascript|4562007|为了将css文件作为新文件加载，而不是采用缓存的版本...我希望我说得很清楚:)|4562008|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Do you have iframes (or modals or smaller windows) loading the same CSS sheet with your media query ? If it's the case, it's a cache problem, and you need to link the CSS file with a dumb param like :

<pre><code>&lt;link href="myCss.css?iframe=1" /&gt;
</code></pre>

In order to load the css file as a new file instead of taking the cached version ... I hope I'm clear :)

blocks|key|4562031|text|只是一个简短的补充，以防止其他人进一步搜索，即使这里给出了答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4562032|我的缩放已经设置为100%25，但问题仍然存在。如果你有同样的体验，答案很简单:将你的缩放设置为90%25，然后再调回100%25，瞧，你想要的宽度上的断点。|4562033|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Just a short addition, to prevent others from searching further even though the answer is given here.

My zoom was already set to 100%, and still the issue was there.
If you experience the same, the answer is simple: set your zoom to 90% and back to 100%, et voila, breakpoints on the width you want 'm.

blocks|key|4562041|text|又增加了一项。经过一个小时的调试，我意识到我已经编写了多个媒体查询，因为css文件是从上到下执行的，所以我覆盖了以前的媒体查询逻辑。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4562042|@media+(max-width:+700px)+{
+.some-class+{+background-color:+red;+}
};

//+This+will+override+the+above+styling+(assuming+max-width+logic+is+true)
@media+(max-width:+800px)+{
+.some-class+{+background-color:+yellow;+}
};|code-block|syntax|javascript|4562043|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Another addition. After an hour of debugging I realized I had coded multiple media queries and because css files are executed from top to bottom, I was overriding previous media query logic.
Ex:

<pre><code>@media (max-width: 700px) {
 .some-class { background-color: red; }
};

// This will override the above styling (assuming max-width logic is true)
@media (max-width: 800px) {
 .some-class { background-color: yellow; }
};
</code></pre>

blocks|key|4562082|text|我在Chrome的媒体查询方面也遇到了一些问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4562083|当我切换设备工具栏时，缩放比例就是错误的。以下是|4562084|<meta+name="viewport"+content="width=device-width,+initial-scale=1">|offset|length|style|CODE|4562085|已修复此问题。|4562086|entityMap^0|0|0|0|1W|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|P|8|@$F|Q|G|R|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|S|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|M|$]]

I also had some problems with media queries in Chrome. 

As soon as I toggled device toolbar, the scaling was just wrong. The following 

<code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;</code>

fixed this issue.

blocks|key|55637|text|这些都没有解决我的问题，但是我的问题，在被弄糊涂了为什么断点发生在1000px之后，是因为我正在使用react响应库，并且我仍然在一些JSX组件中设置了断点！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|55638|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

None of these fixed my issue, but my problem, after being dumbfouded why a breakpoint was occuring at 1000px, was because I was using the react-responsive library and I still had a breakpoint set in some JSX component!

blocks|key|4562172|text|添加我的解决方案，因为没有一个答案解决了我的问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4562173|我将滚动条的宽度设置为10px+(火狐中的thin)，并且窗口的计算宽度没有考虑到滚动条的附加宽度，因此我的断点发生在比指定的@media查询薄10px的位置。|offset|length|style|CODE|4562174|为了解决这个问题，我简单地将10px+(滚动条的宽度)添加到查询中，如下所示：|4562175|@media+(max-width:+600px)|code-block|syntax|javascript|4562176|进入：|4562177|@media+(max-width:+610px)|4562178|祝你编码愉快！|4562179|entityMap^0|0|L|4|1R|6|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@$D|Y|E|Z|F|G]|$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|14|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|15|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|V|$]]

Adding my solution, as none of the answers solved my problem:
I had styled my scrollbar to have a width of 10px (<code>thin</code> in firefox), and the window's computed width was not accounting for the added width of the scrollbar, hence my breakpoints were occurring 10px thinner than the specified <code>@media</code> query.
To fix, I simply added 10px (the width of the scrollbar) to the query, turning:
<pre><code>@media (max-width: 600px)
</code></pre>
into:
<pre><code>@media (max-width: 610px)
</code></pre>
Happy coding!

blocks|key|4562217|text|我最近遇到了这个问题，我发现是滚动条导致了这个问题。我找到了与这个问题相关的答案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4562218|https://css-tricks.com/forums/topic/best-media-query-excluding-scroll-solution/|offset|length|4562219|有两个建议的解决方案：|4562220|html+{
++++overflow:+hidden;
++++height:+100%25;
}

body+{
++++height:+100%25;
++++overflow-y:+scroll;
++++position:+relative;
}|code-block|syntax|javascript|4562221|正如文章提到的那样，这个答案有点老生常谈，即使所有内容都能显示在屏幕上，它也会给您留下一个永久的滚动条。因此，我不是它的大粉丝。|4562222|您也可以使用JS解决方案来解决这个问题。这篇文章提供了一个处理这个问题的git+repo链接。|4562223|最后，如果滚动条不需要精确的话，你可以在媒体规则中增加几个像素来适应滚动条，这在本文中没有提到。如果是这样，那么JS解决方案就是您最好的选择。|4562224|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|27|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@$D|11|E|12|1|13]]|A|$]]|$1|F|3|G|5|6|7|14|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|15|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|16|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|17|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|18|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|C]]]]

I experienced this issue recently and I worked out it was the scrollbar that was causing the issue. I found this answer relating to the problem:
<a href="https://css-tricks.com/forums/topic/best-media-query-excluding-scroll-solution/" rel="nofollow noreferrer">https://css-tricks.com/forums/topic/best-media-query-excluding-scroll-solution/</a>
There were 2 proposed solutions:
<pre><code>html {
 overflow: hidden;
 height: 100%;
}

body {
 height: 100%;
 overflow-y: scroll;
 position: relative;
}
</code></pre>
This answer is a little hacky as the article mentions as well and it leaves you with a permanent scrollbar even when all the content fits on the screen. Therefore, I'm not a big fan of it.
You could use a JS solution to sort this out as well. The article gives a git repo link that deals with the issue.
Lastly, which isn't mentioned in the article, you could add a couple more pixels to your media rule to accommodate the scrollbar if it doesn't have to be precisely accurate. If it does, then the JS solution is your best bet.

blocks|key|55769|text|问题是Chrome将始终包含滚动条(与document.body.clientWidth或jQuery的$(window).width()完全不同，它的行为与window.innerWidth完全相同)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|55770|你只需要构建你的媒体不是像素完美的，而是始终保持它与javascript逻辑中的window.innerWidth一致。否则，你就会陷入黑客泛滥的境地，你不会想掉进那个兔子洞。|55771|entityMap^0|J|P|1G|H|27|H|0|14|H|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|I|$]]

The problem is that Chrome will always include the scrollbar (acting exactly as <code>window.innerWidth</code>, in contrary to <code>document.body.clientWidth</code> or jQuery's <code>$(window).width()</code>).
You just have to build your mediaqueries not pixel perfect, but always keep it consistent with <code>window.innerWidth</code> in javascript logic. Otherwise you're down to overflow hacks and you don't want to go down that rabbit hole.

I am building a responsive page and the media queries are firing at the wrong width size. I am using Chrome.

<pre><code>@media screen and (max-width: 1200px) {
 .logo-pic {
 display: none;
}
}
</code></pre>

For example, this rule works it just fires at wrong size. This rule fires at 1320px and not 1200px.
I have the meta tag for html in place. It seems to be firing the media query 100 or so pixel wider than it normall should.

<pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
</code></pre>

I checked the previous responsive site I made and those breakpoints are firing correctly. I've tested the browser on different websites and the media queries are fine as well. 

I found a similiar question on stack overflow but it went unanswered.

<a href="https://stackoverflow.com/questions/23133609/media-queries-breakpoint-at-wrong-value">Media Queries breakpoint at wrong value</a>

Not sure what the problem is?

Media Queries firing at wrong width

jQuery

我正在构建一个响应式页面，但媒体查询的宽度大小不正确。我使用的是Chrome。@media screen and (max-width: 1200px) { .logo-pic {    display: none;}}例如，这个规则是有效的，它只是在错误的大小下触发。此规则以1320px而不是1200px触发。我已经...

问以错误宽度触发的媒体查询
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问以错误宽度触发的媒体查询EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问以错误宽度触发的媒体查询
EN