显示属性在媒体查询中不起作用

Question

我已经使用 html 创建了一个侧边栏按钮，我想在移动屏幕上显示它，所以我试图以移动尺寸显示它我使用 display none 用于桌面尺寸页面现在更改媒体查询中的显示类型不起作用。 ..

html代码

 <div class="side_bar">
            
          <div class="web-menu" onClick="change()">
            <div class="line line-1"></div>
            <div class="line line-2"></div>
            <div class="line line-3"></div>
          </div>
          </div>

css代码：

.web-menu{
  /* position: fixed; */
    display: none;
    width: 2rem;
    height: 2rem;
    right: 5rem;
    z-index: 200;
    flex-direction: column;
    justify-content: space-evenly;
    cursor: pointer; 

}
.line{
    width: 80%;
    height: 0.25rem;
    background-color:black;
   
     
}  @media  screen and (max-width:900px){
.side_bar{
  display: flex;
  
}
 }
             

Answer 1

使用媒体查询，您应该将显示添加到 .web-menu 而不是 .side_bar