本文介绍两种在 html 中根据屏幕尺寸动态切换导航链接参数的方法：纯 css 媒体查询方案（推荐）和 javascript 动态构建方案，帮助开发者无需后端参与即可实现 `num_months=2`（小屏）与 `num_months=5`（大屏）的智能跳转。
在响应式网页开发中，常需根据设备视口宽度为同一导航项提供不同行为——例如小屏下加载精简版数据（如 num_months=2），大屏下加载更完整内容（如 num_months=5）。以下提供两种成熟、可维护的实现方式：
✅ 方案一：纯 CSS 媒体查询（推荐｜零 JS 依赖｜语义清晰）
该方案通过预置两个 <li> 元素并利用 CSS 控制其显示状态，完全由浏览器原生解析，性能高、兼容性好（支持所有现代浏览器及 IE9+）。
<ul class="nav-list">
<li id="nav-small"><a href="page/index.php?lang=en&id_item=2&num_months=2">Page</a></li>
<li id="nav-large"><a href="page/index.php?lang=en&id_item=2&num_months=5">Page</a></li>
</ul>
<style>
/* 默认仅显示大屏链接 */
#nav-small { display: none; }
#nav-large { display: block; }
/* 当视口宽度 ≤ 960px 时，切换显示逻辑 */
@media screen and (max-width: 960px) {
#nav-small { display: block; }
#nav-large { display: none; }
}
</style>⚠️ 注意事项： 两个 <li> 必须使用唯一 ID（如 #nav-small / #nav-large），避免样式冲突； 若页面含多个类似导航项，建议将结构封装为复用组件（如自定义属性 data-breakpoint="960" + 通用类名）； 此方案对 SEO 友好——两个链接均存在于 DOM 中，但仅一个可见，搜索引擎仍可抓取全部 URL。
✅ 方案二：JavaScript 动态跳转（灵活｜适合复杂逻辑）
当需要基于实时窗口尺寸、用户交互或运行时计算（如按像素密度缩放 num_months）时，JS 方案更合适。注意应避免内联 onclick，改用事件委托提升可维护性：
<!-- 使用语义化按钮替代 a 标签（无固定 href 时更合理） --> <button type="button" id="dynamic-nav-btn">Page</button>
<script>
function buildNavigationUrl() {
const base = 'page/index.php?lang=en&id_item=2';
const width = window.innerWidth;
const numMonths = width <= 960 ? 2 : 5;
return `${base}&num_months=${numMonths}`;
}
document.getElementById('dynamic-nav-btn').addEventListener('click', function() {
window.location.href = buildNavigationUrl();
});
// 可选：监听窗口大小变化（适用于用户缩放浏览器时实时响应）
window.addEventListener('resize', () => {
// 如需实时更新按钮文字或禁用状态，可在此补充逻辑
});
</script>? 进阶提示：若需服务端感知设备类型，建议结合 User-Agent 或 Accept-CH（Client Hints）头信息，而非仅依赖前端判断。
总结建议
| 场景 | 推荐方案 | 理由 |
|---|---|---|
| 简单二值切换（≤960px / >960px） | ✅ 媒体查询 | 零 JS、高性能、易调试、无障碍友好 |
| 需要运行时计算（如 num_months = floor(width / 480)） | ✅ JavaScript | 灵活可控，支持复杂条件链 |
| 多端深度适配（含平板/折叠屏等） | ? 混合方案 | CSS 控制基础布局 + JS 补充动态参数 |
无论选择哪种方式，请始终确保链接语义正确（优先用 <a> 而非 <span> 或 <button>），并在 href 缺失时明确设置 role="link" 以保障可访问性。
