时间戳

首页 > 解决方案 > 显示属性在媒体查询中不起作用

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

问题描述

我已经使用 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;
  
}
 }

标签： htmlcssmedia-queries

解决方案

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

推荐阅读