CSS:媒体查询以匹配 width < x 和 width >= x。奇怪的行为

Question

我正在进行自适应网站设计，并使用特定的 css 媒体查询来匹配较小的显示宽度。

对于我使用的小型显示器:

@media screen and (max-width: 34em) {}

对于更大的显示器，我正在使用:

@media screen and (min-width: 34em) {}

到目前为止，这工作得很好。但是，我注意到窗口有一定宽度，两个媒体查询的样式似乎混合在一起。 (绝对不是没有应用任何查询的情况。)这肯定是一种边缘情况，但可能有人在那里使用特定的窗口或屏幕宽度进行冲浪，并且看到了一个看起来很奇怪的页面。因此，我想知道为什么存在这个问题以及我能做些什么。我在 mac 上的 Safari 和 Firefox 上都试过了，两者都显示了相同的效果。

Answer 1

However, I have notice that there is a certain width of the window where the styles from both media queries seem to be mixed together. (It definitely isn't the case that no query is applied.)

正确；相反，两者 都被应用了，那时视口(viewport)的宽度恰好等于 34 em。然后发生的是级联照常应用。请参阅我对以下问题的回答以获取解释:

What are the rules for CSS media query overlap?

针对两种屏幕尺寸处理此问题的最简单方法是利用级联，但与您所拥有的不同:通常为一种屏幕尺寸编写规则，并且仅包括针对另一种屏幕尺寸的媒体查询显示在 dwreck08's answer .

否则，如果您希望一次只应用一个规则而不依赖级联来覆盖您的样式，请使用 min-width 或 max-width only，并在另一个规则中用 not 关键字否定它。例如，您可以使用以下任一方法:

@media screen and (max-width: 34em) {}     /* Smaller screen sizes */
@media not screen and (max-width: 34em) {} /* Larger screen sizes */

或者这个:

@media not screen and (min-width: 34em) {} /* Smaller screen sizes */
@media screen and (min-width: 34em) {}     /* Larger screen sizes */

顺序无关紧要，因为 not 使这些规则相互排斥 — 至少，在理解关键字的浏览器中，据我所知，这些浏览器无论如何都支持媒体查询。

我对这个问题的回答是对上面链接的问题的后续回答，提供了另一种解释:

How can I avoid media query overlap?