我正在进行自适应网站设计，并正在使用特定的 css 媒体查询来匹配较小的显示宽度。
对于我正在使用的小型显示器：
@media screen and (max-width: 34em) {}
我正在使用更大的显示器：
@media screen and (min-width: 34em) {}
到目前为止，这工作得很好。但是，我注意到窗口有一定宽度，两个媒体查询的样式似乎混合在一起。 （绝对不是没有应用查询的情况。）这肯定是一个边缘情况，但可能有人在那里用特定的窗口或屏幕宽度进行冲浪，并且看到一个看起来很奇怪的页面。因此，我想知道为什么会存在这个问题以及我能做些什么。 我在 Mac 上的 Safari 和 Firefox 上都试过这个，都显示出相同的效果。
【问题讨论】：
标签： css media-queries
但是，我注意到窗口有一定宽度，两个媒体查询的样式似乎混合在一起。 （绝对不是没有应用查询的情况。）
正确；取而代之的是，both 都被应用了，此时视口的宽度正好等于 34 em。然后发生的情况是级联照常适用。请参阅我对以下问题的回答以获得解释：
What are the rules for CSS media query overlap?
针对两种屏幕尺寸范围处理此问题的最简单方法是利用级联，但与您所拥有的不同：通常为一种屏幕尺寸编写规则，并且仅包含针对另一种屏幕尺寸的媒体查询作为显示在dwreck08's answer。
否则，如果您希望一次只应用一个规则而不依赖级联来覆盖您的样式，请仅使用 min-width 或 max-width，并在另一条规则中使用 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 使这些规则互斥——至少在理解关键字的浏览器中，据我所知，它们都支持媒体查询。
我对这个问题的回答是对上述问题的后续回答，它提供了另一种解释：
【讨论】：
看起来您只需要两种可能的样式。因此，我认为您应该能够删除最大宽度查询并像往常一样设置样式以达到预期的结果。
#divName {
properties: here;
}
@media screen and (min-width: 34em) {
#divName {
properties: here;
}
}
【讨论】：
也许是因为您在 34em 处同时拥有最小宽度和最大宽度。因此，当屏幕大小正好是 34 em 时，两个媒体查询都处于活动状态。
您应该尝试将一侧的值更改一个 em，看看它是如何工作的。
@media screen and (max-width: 34em) {}
@media screen and (min-width: 35em) {}
【讨论】：