Javascript 如何使导航栏响应？

我在codepen有一个导航栏：。 它很好，但我意识到它没有反应。我在制作网站方面很有经验，但我对这种快速反应的东西还不熟悉。有人帮忙吗

谢谢。代码如下：

HTML: 最后但并非最不重要的是，JS：

---

您需要使用媒体查询请参见下面的工作示例（您应该检查全屏版本并使用浏览器宽度）

如果您创建响应性布局，以百分比为单位进行思考会更容易。您不会创建640px宽的元素，但会创建100%宽但最大宽度为640px的元素。因此，如果用户的视口宽度大于640px，则元素为640px；如果视口宽度小于640px，则元素为宽度的x%。我的观点是，您需要考虑响应性，每10px屏幕宽度创建数千个媒体查询不是一个好做法

我还建议您使用一些响应性css框架，例如

$（“nav ul li”）。单击（函数（）{
var xcoord=$（this）.data（“xcoord”）；
$（“nav div”）.stop（）.animate（{marginLeft:xcoord}，500，“easeInOutExpo”）；
$（此）.addClass（“活动”）；
$（“nav ul li”）.not（this.removeClass（“active”）；
});
#bg{
位置：固定；
左：0；
排名：0；
宽度：100%；
身高：100%；
背景#38a8d1；
背景：-莫兹线性梯度（顶部，#38a8d1 0%，#34bc9a 36%，#34bc9a 57%，#8645f7 100%）；
背景：-webkit渐变（线性、左上、左下、颜色停止（0%、#38a8d1）、颜色停止（36%、#34bc9a）、颜色停止（57%、#34bc9a）、颜色停止（100%、#8645f7））；
背景：-webkit线性梯度（顶部，#38a8d1 0%，#34bc9a 36%，#34bc9a 57%，#8645f7 100%）；
背景：-o-线性梯度（顶部，#38a8d1 0%，#34bc9a 36%，#34bc9a 57%，#8645f7 100%）；
背景：-ms线性梯度（顶部，#38a8d1 0%，#34bc9a 36%，#34bc9a 57%，#8645f7 100%）；
背景：线性梯度（至底部，#38a8d1 0%，#34bc9a 36%，#34bc9a 57%，#8645f7 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#38a8d1'，endColorstr='#8645f7'，GradientType=0）；
}
部分{
位置：相对位置；
宽度：100%；
最大宽度：640px；
保证金：50px自动；
}
导航{
宽度：100%；
}
李国荣{
显示：内联块；
列表样式：无；
宽度：160px；
文本对齐：居中；
字体系列：Helvetica，无衬线；
边框：1px虚线rgba（255255,0）；
颜色：#fff；
填充：10px 0 10px 0；
保证金：-1px-5px-1px-1px；
光标：指针；
过渡：颜色.2s，背景.2s；
-webkit转换：颜色.2s，背景.2s；
}
导航ul li:未（.active）：悬停{
/*边框：1px虚线#fff*/
背景：rgba（255255.1）；
}
导航ul{
边框：1px实心#fff；
位置：绝对位置；
宽度：100%；
填充：0；
z指数：100；
}
.主动{
颜色：rgba（551861771）；
背景：#fff；
}
@仅介质屏幕和（最大宽度：720px）{
导航ul{
宽度：80%；
左：10%；
}
李国荣{
显示：块；
宽度：100%；
}
}


主页
关于
接触
贮藏

响应式设计有多种元素，也许您有兴趣根据屏幕宽度适当调整导航栏的大小（谷歌“媒体查询css”），我的整个网站在导航栏方面存在问题。在ios和android上，缩放都是错误的。请查看以下屏幕截图：。这是编辑您的节元素css的代码。设置宽度：100%；最大宽度：640像素。
    <div id="bg"></div>
<section>
  <nav>
    <div></div>
    <ul>
      <li data-xcoord="0px" class="active">Home</li>
      <li data-xcoord="160px">About</li>
      <li data-xcoord="320px">Contact</li>
      <li data-xcoord="480px">Store</li>
    </ul>
  </nav>
</section>

#bg{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
background: #38a8d1;
background: -moz-linear-gradient(top,  #38a8d1 0%, #34bc9a 36%, #34bc9a 57%, #8645f7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#38a8d1), color-stop(36%,#34bc9a), color-stop(57%,#34bc9a), color-stop(100%,#8645f7));
background: -webkit-linear-gradient(top,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: -o-linear-gradient(top,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: -ms-linear-gradient(top,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: linear-gradient(to bottom,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38a8d1', endColorstr='#8645f7',GradientType=0 );
}

section{
  position:relative;
  width:640px;
  margin:50px auto;
}
nav{
  width:100%;
}
nav ul li{
  display:inline-block;
  list-style:none;
  width:160px;
  text-align:center;
  font-family:Helvetica, sans-serif;
  border: 1px dashed rgba(255,255,255, 0);
  color:#fff;
  padding:10px 0 10px 0;
  margin:-1px -5px -1px -1px;
  cursor:pointer;
  transition:all .2s;
  -webkit-transition:all .2s;
}
nav ul li:hover{
  /*border:1px dashed #fff;*/
  background:rgba(255,255,255,.1);
}
nav ul{
  border: 1px solid #fff;
  position:absolute;
  width:100%;
  padding:0;
  z-index:100;
}
nav div{
  position:absolute;
  left:0;
  top:16px;
  background: #fff;
  width:162px;
  height:40px;
  z-index:99;
}
.active{
  color:rgba(55, 186, 177, 1);
}

$("nav ul li").click(function(){
  var xcoord = $(this).data("xcoord");

  $("nav div").stop().animate({marginLeft:xcoord}, 500, "easeInOutExpo");
  $(this).addClass("active");
  $("nav ul li").not(this).removeClass("active");

});