Html 为什么不是'；t媒体查询最大宽度工作？

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

我的徽标的原始

width

是

210px

当屏幕

宽度
大于
56.865em
时，我希望它是
166px
，当它小于此
宽度时，它是相同的，即，对于移动站点

我为此编写了以下代码：

@仅媒体屏幕和（最小宽度：56.875em）{
.网站品牌img{
最大宽度：166px；
}
}
@仅介质屏幕和（最大宽度：56.875em）{
.网站品牌img{
最大宽度：166px！重要；
}
}

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

是否有任何规则不能同时使用
min
和
max
媒体查询来控制同一个元素？
由于
max width
规则都具有相同的值，因此它将被
min width
覆盖，因此无法工作

一种简单的方法是，不进行
2次媒体查询
，只需在常规CSS中设置徽标的
宽度
，然后应用媒体查询：


使用
max width

或

使用
最小宽度


带有
最大宽度的选项

.logo img{
宽度：210像素
}
@介质（最大宽度：56.865em）{
.logo img{
宽度：166px
}
}

最大宽度
规则不起作用，因为它被最小宽度
覆盖，因为两者的值相同

一种简单的方法是，不进行
2次媒体查询
，只需在常规CSS中设置徽标的
宽度
，然后应用媒体查询：


使用
max width

或

使用
最小宽度


带有
最大宽度的选项

.logo img{
宽度：210像素
}
@介质（最大宽度：56.865em）{
.logo img{
宽度：166px
}
}
这让我发疯，但我发现在
@media
之前对文本进行注释将阻止该声明

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


/*使用此注释版本*/

希望它能帮助别人
 这让我发疯，但我发现在
@media
之前注释文本会阻止该声明

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


/*使用此注释版本*/

希望它能帮助别人
 不，你可以，我的意思是CSS仍然会被解释为任何其他规则，只是在级联顺序中，任何较低的都会优先。但是使用
！重要信息
声明应避免此问题。你能提供一个有问题的网站的链接吗？在你的代码中媒体查询的位置也很重要。确保它们最后出现。你能发布一个演示问题的片段吗？我是说，很明显，我不能重复这个问题。无论如何，如果你想在小于或等于56.875em的窗口和大于或等于56.875em的窗口中宽度为166px，有一种比使用两个媒体查询更简单的方法…不，你可以，我的意思是CSS仍然会被解释为任何其他规则，只是在级联顺序中任何一个更低的都会优先考虑。但是使用
！重要信息
声明应避免此问题。你能提供一个有问题的网站的链接吗？在你的代码中媒体查询的位置也很重要。确保它们最后出现。你能发布一个演示问题的片段吗？我是说，很明显，我不能重复这个问题。无论如何，如果您希望在小于或等于56.875em的窗口中以及在大于或等于56.875em的窗口中宽度为166px，有一种比使用两个媒体查询更简单的方法……首先，我希望徽标始终为166px。所以你需要编辑它。其次，它不起作用。.logo img{width:166px}根本不起作用。真的不起作用吗？您测试过这两个代码片段吗？？这两种方法都有效。如果你想让徽标一直保持166px，为什么你说当屏幕宽度大于56.865em时我希望它保持166px？但是，嘿，如果你一直想成为
166px
，那为什么要使用媒体查询呢？仅供参考：你的代码的屏幕截图和工作方式是正确的，但这种方法并没有解决我的问题，因为WordPress有许多现有的CSS。我只是改变了它们，问题就解决了。首先，我想要的标志大小166px的所有时间。所以你需要编辑它。其次，它不起作用。.logo img{width:166px}根本不起作用。真的不起作用吗？您测试过这两个代码片段吗？？这两种方法都有效。如果你想让徽标一直保持166px，为什么你说当屏幕宽度大于56.865em时我希望它保持166px？但是，嘿，如果你一直想成为
166px
，那为什么要使用媒体查询呢？仅供参考：你的代码的屏幕截图和工作方式是正确的，但这种方法并没有解决我的问题，因为WordPress有许多现有的CSS。我刚换了它们，问题就解决了。