使用媒体查询调整CSS按钮字体大小失败，请求排查问题

嘿，这问题其实挺常见的，我一眼就发现问题出在哪了！

你想要在小屏幕下缩小按钮字体，但你的媒体查询逻辑写反啦：
你用的是 @media screen and (min-width: 1251px)，这个规则的意思是「当屏幕宽度大于等于1251px的时候，应用12px的字体」——这和你想要的效果完全相反！小屏幕的宽度肯定小于1251px，所以这个规则根本不会触发，按钮自然还是保持16px的字体。

修正后的CSS代码 #

把媒体查询改成 max-width，这样就能匹配屏幕宽度小于等于指定值的情况：

.button { 
  -webkit-border-radius: 0; 
  -moz-border-radius: 0; 
  border-radius: 0px; 
  font-family:inherit; 
  color: #393939 !important; 
  font-size: 16px; 
  background: #c8d6e5; 
  padding: 8px 18px 8px 18px; 
  border: solid #ffffff 2px; 
  text-decoration: none; 
  text-transform: uppercase; 
}
.button:hover { 
  background: #9facb5; 
  text-decoration: none; 
}
/* 当屏幕宽度小于等于1250px时，应用更小的字体 */
@media screen and (max-width: 1250px) { 
  .button { 
    font-size: 12px !important; 
  } 
}

额外小贴士 #

1. 如果你想针对更窄的屏幕（比如手机，宽度小于768px）调整，可以把max-width的值改成768px或者其他你需要的阈值。
2. 尽量避免滥用!important，如果你的CSS选择器优先级足够（比如确保媒体查询的选择器和基础.button选择器权重一致），其实可以去掉!important，让样式更易维护。

内容的提问来源于stack exchange，提问作者Henry