嘿，我一眼就发现问题所在啦！你的媒体查询代码里漏掉了目标选择器，导致屏幕宽度≤599px时，display: block的样式根本没应用到按钮上～

问题分析 #

你原来的CSS代码是这样的：

button { display: none; } 
@media screen and (max-width: 599px) { display: block; }

全局样式里确实给所有button设置了隐藏，但媒体查询块里只写了display: block，却没告诉浏览器这个样式要作用到哪个元素上，浏览器自然不知道该把按钮显示出来啦。

修正方案 #

有两种靠谱的修正方式，你可以根据需求选：

方式1：针对所有button标签生效

给媒体查询里加上button选择器，确保样式作用到目标元素：

button { 
  display: none; 
} 

@media screen and (max-width: 599px) {
  button { 
    display: block; 
  }
}

方式2：仅针对当前模态按钮生效（更推荐）

用按钮的类选择器.btn-primary，避免影响页面上其他button元素：

.btn-primary { 
  display: none; 
} 

@media screen and (max-width: 599px) {
  .btn-primary { 
    display: block; 
  }
}

额外排查点 #

如果按上面改完还是不生效，可以检查：

• 按钮有没有内联样式style="display: none"，内联样式优先级比外部CSS高，会覆盖媒体查询的设置
• 有没有其他更具体的CSS选择器（比如div .btn-primary）覆盖了你的样式，这时候可以调整选择器的优先级，或者临时用display: block !important;排查（但不推荐长期使用!important，尽量优化选择器）

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