Question

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

对于我正在使用的小型显示器：

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

对于我使用的更大的显示器：

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

到目前为止这种方法效果很好。但是，我注意到窗口有一定的宽度，两个媒体查询的样式似乎混合在一起。（肯定不是没有应用查询的情况。）这肯定是一个边缘情况，但可能有人在那里冲浪与特定窗口或屏幕宽度，并看到一个奇怪的页面。因此，我想知道为什么这个问题存在以及我能做些什么。我在Mac上的Safari和Firefox上都尝试了这一点，两者都显示了相同的效果。

Answer 1

但是，我注意到窗口有一定的宽度，两个媒体查询的样式似乎混合在一起。（绝对不是没有应用查询的情况。）

正确;相反，它们的两个正在被应用，并且当视口的宽度恰好等于34 ems时。那么会发生的是级联如常应用。请参阅我对以下问题的回答以获得解释：

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使这些规则互相排斥 - 至少在了解关键字的浏览器中，据我所知，所有关键字都支持媒体查询。

我对这个问题的回答是对上述问题的跟进，提供了另一种解释：

How can I avoid media query overlap?

Answer 2

看起来你只需要两种造型可能性。因此，我认为您应该能够删除最大宽度查询，并按照通常的方式设置样式以获得所需的结果。

  #divName {
  properties: here;
}

@media screen and (min-width: 34em) {
  #divName {
   properties: here;
   }
}

Answer 3

也许是因为你在34em都有最小宽度和最大宽度。因此，当屏幕大小恰好为34 em时，两个媒体查询都处于活动状态。

你应该尝试将一方的值改为一个，看看它是如何工作的。

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

CSS：匹配宽度的媒体查询＆lt; x和宽度> = x。奇怪的行为

3 个答案: