本文详解如何基于 jquery 和 css 媒体查询，构建一个在桌面端保持 350px 宽度、在移动端（≤767px）自动扩展为全屏宽度的滑出式导航菜单，并确保动画逻辑与隐藏行为精准适配不同屏幕尺寸。
要实现真正响应式的滑出菜单——即桌面端固定 350px 宽、移动端全屏覆盖（100vw）且动画收起位置动态匹配——关键在于 CSS 媒体查询 + JavaScript 尺寸感知逻辑的协同设计，而非仅靠 $(document).width() 一次性判断。原方案中将 JS 判断写在初始化时（未监听窗口变化），会导致横竖屏切换或浏览器缩放后行为异常；同时，CSS 中直接嵌套 @media（如 .menu-general { @media {...} }）在标准 CSS 中是非法语法（需独立媒体查询块或预处理器支持），必须修正。
✅ 正确实现方式如下：
一、CSS：用标准媒体查询定义响应式基础样式
.menu-general {
position: fixed;
top: 0;
bottom: 0;
z-index: 9999;
padding: 10px;
background-color: black;
/* 默认：桌面端 */
width: 350px;
right: -350px;
}
/* 移动端：全屏宽度 & 全屏隐藏偏移 */
@media screen and (max-width: 767px) {
.menu-general {
width: 100vw;
right: -100vw; /* 确保初始完全隐藏，不残留边框 */
}
}⚠️ 注意：-100vw 比 -100% 更可靠——它基于视口宽度计算，不受父容器 padding/margin 影响，避免移动端因盒模型导致菜单微露。
二、JavaScript：按需绑定事件，支持响应式重置
function initMenuBehavior() {
const $menu = $('#menu-general');
const $openBtn = $('#menu-up-control');
const $closeBtn = $('#menu-up-control-close');
// 清除旧事件（防止重复绑定）
$openBtn.off('click').on('click', function () {
$menu.show().animate({ right: '0' }, 500);
});
$closeBtn.off('click').on('click', function () {
const isMobile = $(window).width() <= 767;
const hideOffset = isMobile ? '-100vw' : '-350px';
$menu.animate({ right: hideOffset }, 500, function () {
$menu.hide();
});
});
}
// 页面加载时初始化
$(document).ready(initMenuBehavior);
// 窗口大小改变时重新校准（可选，增强鲁棒性）
$(window).on('resize', function () {
// 若需在 resize 后立即调整菜单状态（如从桌面缩到手机宽度时自动隐藏），可在此添加逻辑
// 例如：if ($(window).width() <= 767 && $('#menu-general').css('right') === '0px') { ... }
});三、HTML 结构（精简可靠版）
<!-- 确保 viewport 设置正确 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<a id="menu-up-control" class="menu-up-control">
<i class="fa fa-bars"></i>
</a>
<div id="menu-general" class="menu-general">
<div id="menu-up-control-close" class="menu-up-control-close">
<i class="fa fa-times"></i>
</div>
<ul class="menu-main">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>✅ 最佳实践总结：
- 不要在 JS 初始化时静态判断屏幕尺寸：使用 $(window).width() 在每次点击时动态获取，确保横屏/缩放场景下行为一致；
- CSS 媒体查询必须独立书写：.menu-general { ... } @media {...} 是合法写法，但 .menu-general { @media {...} } 是 Sass/Less 语法，纯 CSS 不支持；
- 隐藏偏移量必须与当前宽度严格对应：移动端用 -100vw，桌面端用 -350px，二者不可混用；
- 添加 off().on() 防重复绑定：避免多次加载/SPA 路由切换导致事件叠加；
- $menu.show() 在打开前显式调用：防止因 display: none 导致 animate() 失效。
这样实现的菜单既符合移动优先原则，又保持桌面端精致控件体验，且具备良好的可维护性与跨设备稳定性。
