如何使用CSS媒体查询创建响应式导航菜单？

在创建响应式导航菜单时，CSS 媒体查询是一种非常有用的工具，它可以帮助我们根据不同的屏幕尺寸和设备特性来调整导航菜单的样式和布局。以下是如何使用 CSS 媒体查询来创建响应式导航菜单的步骤和示例：

1. 基本HTML结构

首先，我们需要设置一个基本的HTML结构，如下所示：

html
<nav>
    <div class="nav-menu">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </div>
    <div class="menu-toggle">☰</div>
</nav>

2. 基本CSS样式

然后，我们为导航菜单添加一些基础样式：

css
.nav-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}
.nav-menu li {
    padding: 15px;
}
.menu-toggle {
    display: none;
}

3. 使用CSS媒体查询添加响应式特性

接下来，我们使用媒体查询来改变在不同屏幕尺寸下的导航菜单布局：

css
@media (max-width: 768px) {
    .nav-menu ul {
        display: none;
        flex-direction: column;
        width: 100%;
    }
    .nav-menu li {
        text-align: center;
        width: 100%;
    }
    .menu-toggle {
        display: block;
        cursor: pointer;
    }
}

4. 使用JavaScript来切换菜单显示

最后，我们添加一些JavaScript代码来控制小屏幕尺寸下导航菜单的显示：

javascript
document.querySelector('.menu-toggle').addEventListener('click', function() {
    var menu = document.querySelector('.nav-menu ul');
    if(menu.style.display === 'block') {
        menu.style.display = 'none';
    } else {
        menu.style.display = 'block';
    }
});

5. 结果

以上设置将会在屏幕宽度少于768px时隐藏主导航菜单，并显示一个菜单图标（通常称为汉堡菜单）。用户点击图标时，菜单将以垂直堆叠的形式展开。

通过使用这种方式，我们可以根据不同的设备屏幕尺寸提供更好的用户体验，并确保网站的导航是用户友好和功能性的。