css - 如何使用 css 媒体查询显示隐藏按钮？

Question

我有一个隐藏按钮，它的意思是 display:none。我试过这个。

@media screen and (max-width:1360px) {
#a10{display:none;}
#menu_btn{display:block;}
}

Answer 1

以下代码的意思是:“当屏幕大于或等于 1360 时，将#menu_btn 显示为内联 block ，当屏幕小于 1360 时，将其隐藏”

HTML:

<input id="menu_btn" type="button"/>

CSS:

@media screen and (min-width:1360px) {
  #menu_btn { display:inline-block; }
}
@media screen and (max-width:1359px) {
  #menu_btn { display:none; }
}

附言。请记住，您不能像这样在 html 中设置内联样式:<input id="menu_btn" type="button" style="display:none"/>因为它将覆盖媒体查询的样式，并且无论屏幕尺寸如何，您的按钮都不会显示。