Html CSS媒体查询问题

我遇到了一个以前在媒体查询中没有遇到的问题。我主要在Chrome和Opera的移动设备上有这个问题，但在Safari和Firefox中没有

我有一个按钮，对于屏幕大于769px的设备，

display

属性设置为

none

，默认设置为

inline block

。但对于屏幕小于769px的设备，大多数浏览器不会将属性更改为

内联块。下面是一个伪代码：

CSS:

您是否在页面中添加了
标记？是否在页面中添加了
标记？
.btn_play {
 display: inline-block;
 width:21.875%;
 border-radius:50%;
 background: #F7F7F7;
 font-size: 0;
 font-weight: normal;
 text-align:center;
 color: inherit;
 vertical-align: middle;
 position: relative;
 z-index: 22;
}

@media (min-width: 320px) and (orientation: landscape) {
  .btn_play {
    display: inline-block;
  }
  .btn_play_desktop {
    display: none;
  }
}

@media (min-width: 769px) and (orientation: landscape){
  .btn_play {
    display: none;
  }
  .btn_play_desktop {
    display: inline-block;
  }
}