用于响应式的 HTML + CSS 菜单按钮

Question

H，我是前端的初学者，我想显示移动设备的菜单按钮（响应式）。谁能帮帮我，怎么办？我认为需要JavaScript 或Query。我找到了一些解决方案但不起作用。我在后端使用 Django。 html

div class="header1">
        <div class="header1_box">
            <a href="/" class="logo left"><img src="static/css/covers/logos.png" alt="logo"></a>
            <ul class="content_menu hide_mob" style="position:relative;"></ul>
            <ul class="content_menu hide_mob">
                <li><a href="/" class="active">Horoscope</a></li>
                <li><a href="blog">Blog</a></li>

            </ul>
            <div class="right">
                <a class="mob_menu" id="menu_button"></a>
               
                  </a>
            </div>
        </div>
    </div>

css

.mob_menu {
        float: right;
        cursor: pointer;
        width: 29px;
        height: 29px;
        background-image: url("covers/header_menu.png");
        background-repeat: no-repeat;
        margin: 10px 10px 0 0;
        background-size: 29px
    }
    .mobile_menu {
        width: 100%;
        overflow: auto;
        height: 100%
    }
    .mobile_menu li {
        width: 100%
    }
    .mobile_menu li a {
        color: #fff;
        padding: 13px 15px;
        font-family: font2;
        display: block;
        font-size: 13px;
        border-top: 1px solid #2f41a7
    }

Answer 1

您是否使用过引导程序或其他响应式插件？如果只自定义响应布局，请参考 css3 @media。例如。

<style> 
@media  (min-width:600px){ 
.trans_menu{
    float: right;
    cursor: pointer;
    width: 29px;
    height: 29px;
    background-image: url("covers/header_menu.png");
    background-repeat: no-repeat;
    margin: 10px 10px 0 0;
    background-size: 29px
  }
}
@media (max-width:400px){ 
.mobile_menu {
    width: 100%;
    overflow: auto;
    height: 100%
}
.trans_menu{
    width: 100%;
    overflow: auto;
    height: 100%
}
.mobile_menu li {
    width: 100%
}
.mobile_menu li a {
    color: #fff;
    padding: 13px 15px;
    font-family: font2;
    display: block;
    font-size: 13px;
    border-top: 1px solid #2f41a7
 }
}

</style>

这是修改了类的菜单。(html)

<div class="right">
   <a class="trans_menu" id="menu_button" href="/">button</a>
</div>

改变页面宽度，菜单也会随之改变。