@media媒体查询设置的按钮max-width不生效的问题排查与解决

嗨，这种明明能在浏览器调试工具里看到媒体查询的规则，但样式就是不生效的情况真的很让人挠头！我来帮你拆解下问题根源和解决办法：

问题回顾 #

你给产品标签栏的按钮设置了基础样式，其中包含min-width: 245px，然后在屏幕宽度≤768px的媒体查询里，试图把按钮的max-width设为180px，但实际缩窗后按钮还是保持245px宽度，媒体查询的规则能被浏览器识别却没效果。

问题根源 #

这是CSS的内置逻辑导致的：当元素的min-width值大于max-width值时，浏览器会优先遵循min-width的限制。你的基础样式里min-width:245px，媒体查询里只改了max-width:180px，245px＞180px，所以浏览器还是会强制按钮保持至少245px的宽度，自然看不到max-width的效果。

解决方法 #

你自己找到的方向完全正确！只需要在媒体查询里同时调整min-width，让它的值不大于max-width就行。你修改后的代码就完美解决了这个问题：

基础CSS样式

#product-tabs button{
  width: 100%;
  min-width: 245px;
  border: 1px solid #777;
  background: #fff;
  color: #444444;
  border-bottom: 0;
}

#product-tabs button.active {
  background: #288d95;
  border: 1px solid #288d95;
  color: #fff;
}

修改后的媒体查询样式

@media (max-width: 768px){
  #product-tabs button{
    max-width: 180px;
    min-width: 100%;
  }
}

这样一来，小屏幕下按钮的宽度限制就变成了「至少占满父容器宽度（100%），最多不超过180px」，逻辑通顺，样式自然就能正常生效啦～

备注：内容来源于stack exchange，提问作者GameClub