如何根据屏幕尺寸切换导航栏链接的跳转地址？

方法一：纯CSS媒体查询（无需JS） #

这种方法最简洁，直接通过CSS控制两个链接的显示/隐藏，不需要额外脚本：

HTML 结构 #

把两个链接都写在导航栏里，分别加专属类名区分：

<!-- 假设你的导航栏是ul结构 -->
<ul class="nav-bar">
  <!-- 移动端链接：屏幕<960px时显示 -->
  <li class="nav-link mobile-only"><a href="page/index.php?lang=en&id_item=2&num_months=2">Page</a></li>
  <!-- 桌面端链接：屏幕≥960px时显示 -->
  <li class="nav-link desktop-only"><a href="page/index.php?lang=en&id_item=2&num_months=5">Page</a></li>
</ul>

CSS 样式 #

通过媒体查询控制显示逻辑：

/* 默认显示桌面端链接，隐藏移动端 */
.nav-link.mobile-only {
  display: none;
}
.nav-link.desktop-only {
  display: block;
}

/* 屏幕宽度<960px时，切换显示移动端链接 */
@media (max-width: 959px) {
  .nav-link.mobile-only {
    display: block;
  }
  .nav-link.desktop-only {
    display: none;
  }
}

注意：这里用max-width:959px对应“屏幕<960px”的条件，避免和960px临界值冲突。

方法二：JavaScript 动态修改（支持窗口 resize 实时更新） #

如果需要更灵活的控制（比如窗口大小改变时实时切换），可以用JS实现：

实现代码 #

<ul class="nav-bar">
  <!-- 预留一个空的li用来插入动态链接 -->
  <li id="dynamic-nav-item"></li>
</ul>

<script>
// 定义设置导航链接的函数
function setNavLink() {
  const navItem = document.getElementById('dynamic-nav-item');
  const isMobile = window.innerWidth < 960;
  // 根据屏幕尺寸选择对应的链接参数
  const numMonths = isMobile ? 2 : 5;
  const linkUrl = `page/index.php?lang=en&id_item=2&num_months=${numMonths}`;
  
  // 更新导航项内容
  navItem.innerHTML = `<a href="${linkUrl}">Page</a>`;
}

// 页面加载时初始化
window.addEventListener('load', setNavLink);

// 监听窗口大小变化，实时更新（加防抖避免频繁触发）
let resizeTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(setNavLink, 200);
});
</script>

这个方法会在页面加载和窗口大小改变时，自动判断屏幕尺寸并更新链接地址，无需维护两个重复的li元素。

内容的提问来源于stack exchange，提问作者bubblebobble