如何实现仅在移动端/平板端显示汉堡菜单的响应式导航

解决方案 #

核心通过媒体查询区分设备断点，覆盖不同场景下的导航样式，修改步骤如下：

• 第一步：删除原有.open样式里的display:block !important规则，该规则优先级过高会导致桌面端无法隐藏汉堡按钮
• 第二步：在你标注*的代码区域替换为以下内容，断点默认设为992px（大于该值为桌面端，小于为移动/平板端，可根据需求自行调整数值）：

/* 移动端/平板端样式 屏幕宽度小于992px生效 */
.open {
    float:right;
    color:#4054b4;
    margin:1em 0 0 1em;
    cursor:pointer;
    display:block;
}
.nav{
    width: 0;
    height: 100vh;
    z-index: 3;
    position: fixed;
    overflow: hidden;
    background-color: #4054b4;
    transition: 0.3s;
}
.nav a {
    display: block;
    color: #ffffff;
    padding: 1em 0;
    transition: 0.4s;
}
.close {
    float: center;
    margin: 1em 0 0 1em;
}

/* 桌面端样式 屏幕宽度大于等于992px生效 */
@media screen and (min-width: 992px) {
    /* 隐藏汉堡按钮 加!important覆盖JS动态设置的display属性 */
    .open {
        display: none !important;
    }
    /* 重置移动端导航属性，改为桌面端正常显示 */
    .nav {
        width: auto !important;
        height: auto;
        position: static;
        background-color: transparent;
        overflow: visible;
    }
    /* 隐藏移动端关闭按钮 */
    .close {
        display: none;
    }
}

• 额外说明：原有JS里动态修改width和display的逻辑不会影响桌面端表现，因为媒体查询中加了!important优先级更高，桌面端会始终隐藏汉堡、正常显示导航菜单。

内容的提问来源于stack exchange，提问作者Owl Light