本文介绍两种在html中根据屏幕宽度动态生成不同url链接的方法：纯css媒体查询方案（推荐）和javascript动态构建方案，适用于响应式导航栏中需按设备尺寸加载不同参数的场景。
在构建响应式导航栏时，有时需要根据用户设备的屏幕宽度加载不同参数的页面链接（例如移动端显示2个月数据，桌面端显示5个月），而非简单地隐藏/显示元素。以下提供两种成熟、可维护的实现方式：
✅ 方案一：纯CSS媒体查询（推荐｜零JS依赖｜性能最优）
该方案通过预置两套 标签并利用CSS媒体查询控制其可见性，完全不依赖JavaScript，语义清晰、加载迅速且SEO友好。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>响应式导航链接</title>
<style>
/* 默认状态：仅显示桌面版链接（≥960px） */
#nav-link-mobile { display: none; }
#nav-link-desktop { display: block; }
/* 当屏幕宽度 ≤ 960px 时，切换显示逻辑 */
@media screen and (max-width: 960px) {
#nav-link-mobile { display: block; }
#nav-link-desktop { display: none; }
}
/* 可选：为列表项添加基础样式 */
nav ul { list-style: none; margin: 0; padding: 0; }
nav li { display: inline-block; margin-right: 1rem; }
</style>
</head>
<body>
<nav>
<ul>
<li id="nav-link-mobile">
<a href="page/index.php?lang=en&id_item=2&num_months=2">Page</a>
</li>
<li id="nav-link-desktop">
<a href="page/index.php?lang=en&id_item=2&num_months=5">Page</a>
</li>
</ul>
</nav>
</body>
</html>⚠️ 注意事项： 必须设置 ，否则移动设备可能忽略媒体查询； 两个 标签的 id 值需唯一且与CSS选择器严格匹配； 若页面存在多个类似链接，建议使用类名（如 .link-mobile, .link-desktop）配合更通用的选择器，提升复用性。
✅ 方案二：JavaScript动态生成（灵活｜适合复杂逻辑）
当链接参数需实时计算（如按像素比例动态决定 num_months）、或需结合用户交互（如点击后检测当前尺寸）时，JavaScript方案更合适。
<nav>
<ul>
<li>
<a href="#" id="dynamic-link">Page</a>
</li>
</ul>
</nav>
<script>
function generateLink() {
const base = "page/index.php?lang=en&id_item=2&num_months=";
const width = window.innerWidth;
const months = width <= 960 ? 2 : 5;
return base + months;
}
document.getElementById("dynamic-link").addEventListener("click", function(e) {
e.preventDefault(); // 阻止默认跳转
window.location.href = generateLink();
});
// （可选）支持窗口缩放时自动更新（如PWA中侧边栏切换）
window.addEventListener("resize", () => {
// 如需实时更新链接 href 属性（非必须），可在此处刷新
});
</script>? 进阶提示：
- 使用 e.preventDefault() 是关键，避免点击瞬间跳转到 #；
- 若需支持服务端渲染（SSR）或首屏SEO，不建议单独依赖JS方案——应与服务端逻辑或方案一结合；
- 对于更复杂的参数规则（如多断点、DPR适配），可将判断逻辑封装为独立函数，便于测试与维护。
总结
- 优先选用媒体查询方案：简洁、可靠、无JS风险，符合渐进增强原则；
- JavaScript方案适用于动态场景：如需运行时计算、用户行为触发或与其它脚本联动；
- 无论哪种方式，都应确保 viewport 元标签存在，并在真实设备上充分测试断点效果（推荐使用Chrome DevTools设备模拟器+真机验证）。
掌握这两种方法，你就能精准控制不同设备下的导航行为，让响应式体验真正“有据可依”。
