Javascript 如何根据视口使导航栏响应？

我想制作一个响应性强的网页。我希望它根据视口显示不同的导航。以下是我目前掌握的javascript：

var shownav=document.getElementById'show-nav'； 如果屏幕宽度<720{ shownav.style.display='block'；

---

} 不使用javascript，您可以通过以下方式实现：

显示导航{ 显示：无； 背景色：红色； } /*如果屏幕宽度小于720px，则显示导航将是一个块*/ @仅介质屏幕，最大宽度：720px{ 显示导航{ 显示：块； } } 导航栏

---

不使用javascript，您可以通过以下方式实现：

显示导航{ 显示：无； 背景色：红色； } /*如果屏幕宽度小于720px，则显示导航将是一个块*/ @仅介质屏幕，最大宽度：720px{ 显示导航{ 显示：块； } } 导航栏

---

您只能使用css来完成此操作

演示，让它完整的页面 身体{ 保证金：0； } 导航{ 宽度：100vw； 背景：黄色； } @仅介质屏幕和最小宽度：720px{ 导航{ 背景：红色； } } 欢迎

---

您只能使用css来完成此操作

演示，让它完整的页面 身体{ 保证金：0； } 导航{ 宽度：100vw； 背景：黄色； } @仅介质屏幕和最小宽度：720px{ 导航{ 背景：红色； } } 欢迎

---

你为什么不只用css呢？媒体查询？对不起，我不熟悉媒体查询。你能告诉我怎么做吗？试试这个和这个为什么你不只用css呢？媒体查询？对不起，我不熟悉媒体查询。你能告诉我怎么做吗？试试这个，谢谢你，我现在明白了。@landonsooo没问题；如果答案能解决您的问题，请验证并投票。谢谢，我现在明白了。@LandonSooHoo没问题；如果答案能解决您的问题，请验证并投票。

@media only screen and (max-width: 720px) {
  #show-nav {
    display: block;
  }
}