为啥对最大宽度的媒体查询不起作用？

Posted 2023-03-06

【中文标题】为啥对最大宽度的媒体查询不起作用？

【英文标题】：Why isn't media query on max-width working?为什么对最大宽度的媒体查询不起作用？

【发布时间】：2016-10-20 05:44:45

【问题描述】：

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

我的标志原来的width是210px。

当屏幕width大于56.865em时，我希望它是166px，当它小于width时，我希望它是166px，即对于移动网站。

我为此编写了以下代码：

@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;
  

只有第一个代码块在工作。为什么第二个不起作用？ （当屏幕宽度减小时，标志的width又变成210px。

是否有任何规则不能同时使用 min 和 max 媒体查询来控制同一个元素？

【问题讨论】：

不，你可以，我的意思是 CSS 仍将被解释为任何其他规则，只是级联顺序中较低的将优先。但是使用!important 声明应该可以规避这一点。您能否提供相关网站的链接？

媒体查询在代码中的位置也很重要。确保它们出现在最后。

你能发布一个演示问题的sn-p吗？我的意思是，我不能重复这个问题，很明显。 jsfiddle.net/MrLister/vgag3pd7

无论如何，如果您希望在小于或等于 56.875em 的窗口中以及在大于或等于 56.875em 的窗口中宽度为 166px，则有比使用两个媒体更简单的方法查询...

【参考方案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>

---

更新

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

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

那么您不需要媒体查询。假设您正在更改自定义 CSS 文件并且您不能/想要更改基本 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>

【讨论】：

首先，我一直希望徽标大小为 166px。所以你需要编辑它。其次它不起作用。 .logo img width: 166px 根本不起作用。

真的不行吗？你测试过两个sn-ps吗？两者都在工作..如果您希望徽标始终为 166px，为什么您说 当屏幕宽度大于 56.865em 时我希望它为 166px？但是，如果你想一直成为166px，那为什么还要使用媒体查询呢？

仅供参考：1st snippet 和 2nd snippet 工作的屏幕截图

您的代码是正确的，但这种方法并没有解决我的问题，因为 WordPress 已有很多 CSS。我只是改变了它们，问题就解决了。

【参考方案2】：

这让我发疯了，但我发现在 @media 之前注释掉文本会阻止该语句。

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

希望它可以帮助某人！