本文介绍两种在html中根据屏幕宽度动态生成不同url链接的方法：纯css媒体查询方案（推荐）和javascript动态构建方案，适用于响应式导航栏中需按设备尺寸加载不同参数的场景。

在构建响应式导航栏时，有时需要根据用户设备的屏幕宽度加载不同参数的页面链接（例如移动端显示2个月数据，桌面端显示5个月），而非简单地隐藏/显示元素。以下提供两种成熟、可维护的实现方式：

✅ 方案一：纯CSS媒体查询（推荐｜零JS依赖｜性能最优）

该方案通过预置两套 标签并利用CSS媒体查询控制其可见性，完全不依赖JavaScript，语义清晰、加载迅速且SEO友好。

⚠️ 注意事项： 必须设置 ，否则移动设备可能忽略媒体查询； 两个 标签的 id 值需唯一且与CSS选择器严格匹配； 若页面存在多个类似链接，建议使用类名（如 .link-mobile, .link-desktop）配合更通用的选择器，提升复用性。

✅ 方案二：JavaScript动态生成（灵活｜适合复杂逻辑）

当链接参数需实时计算（如按像素比例动态决定 num_months）、或需结合用户交互（如点击后检测当前尺寸）时，JavaScript方案更合适。

? 进阶提示：

• 使用 e.preventDefault() 是关键，避免点击瞬间跳转到 #；
• 若需支持服务端渲染（SSR）或首屏SEO，不建议单独依赖JS方案——应与服务端逻辑或方案一结合；
• 对于更复杂的参数规则（如多断点、DPR适配），可将判断逻辑封装为独立函数，便于测试与维护。

总结

• 优先选用媒体查询方案：简洁、可靠、无JS风险，符合渐进增强原则；
• JavaScript方案适用于动态场景：如需运行时计算、用户行为触发或与其它脚本联动；
• 无论哪种方式，都应确保 viewport 元标签存在，并在真实设备上充分测试断点效果（推荐使用Chrome DevTools设备模拟器+真机验证）。

掌握这两种方法，你就能精准控制不同设备下的导航行为，让响应式体验真正“有据可依”。