为什么媒体查询最大宽度无效？

Question

我想使用媒体查询来控制徽标的大小。

我徽标的原始width为210px。

我希望屏幕166px大于width时为56.865em，小于此width时为@media only screen and (min-width: 56.875em){ .site-branding img{ max-width: 166px; } } @media only screen and (max-width: 56.875em){ .site-branding img { max-width: 166px !important; } } ，即移动网站。 / p>

我为此编写了以下代码：

width

只有第一个代码块正常工作。为什么没有第二次工作？ （当屏幕宽度减小时，徽标的210px会再次变为min。

是否有任何规则可以同时使用max和485媒体查询来控制相同的元素？

Answer 1

max-width规则不起作用，因为它被min-width覆盖，因为它们都具有相同的值。

一种简单的方法，而不是2 media queries，只需在常规CSS中设置徽标width，然后应用媒体查询：

• 使用max-width

  通过非移动方式

  或

• 使用min-width

通过移动优先方法

选项max-width

.logo img {
  width: 210px
}
@media (max-width: 56.865em) {
  .logo img {
    width: 166px
  }
}

<div class="logo">
  <img src="//lorempixel.com/300/300">
</div>

选项min-width

.logo img {
  width: 166px
}
@media (min-width: 56.865em) {
  .logo img {
    width: 210px
  }
}

<div class="logo">
  <img src="//lorempixel.com/300/300">
</div>

更新

  

首先，我希望徽标大小始终为166px。

因此，如果您想要始终在width处设置徽标166px，则意味着您要将当前210px更改为166px

然后您不需要媒体查询。假设您正在更改自定义CSS文件而您不能/想要更改Base CSS文件（包含width:210px），您需要的更具体。

在MDN和W3C Specs

中查看有关CSS特异性的更多信息

/* emulating Base CSS */

.logo img {
  width: 210px
}
/*being more specific */
.header .logo img {
  width: 166px
}

<div class="header">
  <div class="logo">
    <img src="//lorempixel.com/300/300">
  </div>
</div>

Answer 2

这让我抓狂，但我发现在@media之前评论文字会阻止该陈述。

<!-- DO NOT COMMENT LIKE THIS BEFORE @media -->
/* USE THIS Comment version */

希望它可以帮助别人！