Javascript 调整浏览器大小时，html页面会变得疯狂

所以我想构建一个包含3个页面和一个进度条的模式，每当我点击一个按钮时，进度条就会改变。问题是当我调整浏览器大小时，进度条会从模式中消失

这是我的密码：

$（文档）.ready（函数（）{
$（'.trigger'）。单击（函数（）{
$（'.modal wrapper'）.toggleClass（'open'）；
$（'.page wrapper'）.toggleClass（'blur'）；
返回false；
});
$（'.go'）。单击（函数（）{
$（'.pg2'）.toggleClass（'active'）；
}) ;
$（'.gg'）。单击（函数（）{
$（'.pg3'）.toggleClass（'active'）；
}) ;
});
var pageIndex=1；
显示页面（页面索引）；
功能下一页（n）{
显示页面（页面索引+=n）；
}
功能显示页面（n）{
var i；
var pages=document.getElementsByClassName（“pop”）；
如果（n>pages.length）{pageIndex=1}
如果（n<1）{pageIndex=pages.length}
对于（i=0；i

@导入url(https://fonts.googleapis.com/css?family=Courgette|奥斯瓦尔德）；
@导入url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
html，正文{
宽度：100%；
身高：100%；
保证金：0；
}
.发送{
字体系列：舞蹈脚本，佐治亚州，泰晤士报，衬线；
字体大小：35px；
文本对齐：居中；
颜色：#01bce5；
}
.页面包装器{
宽度：100%；
身高：100%；
背景：url(http://feelgrafix.com/data/background/background-1.jpg)中心不重复；
背景尺寸：封面；
}
.模糊{
-webkit过滤器：模糊（5px）；
-moz过滤器：模糊（5px）；
-o-滤波器：模糊（5px）；
-ms过滤器：模糊（5px）；
过滤器：模糊（5px）；
}
a、 btn{
宽度：150px；
显示：块；
利润率：-25px0-75px；
填充：1em 0；
位置：绝对位置；
顶部：50%；左侧：50%；
字体：1.125em“Arial”，无衬线；
字号：700；
文本对齐：居中；
文字装饰：无；
颜色：#fff；
背景：rgba（217,67,86,1）；
}
a、 去{
宽度：150px；
显示：块；
利润率：-25px0-75px；
填充：1em 0；
位置：绝对位置；
顶部：60%；左侧：80%；
字体：1.125em“Arial”，无衬线；
字号：700；
文本对齐：居中；
文字装饰：无；
颜色：#fff；
背景：rgba（217,67,86,1）；
}
a、 gg{
宽度：200px；
高度：10px；
显示：块；
利润率：-25px0-250px；
填充：1em 0；
位置：绝对位置；
顶部：70%；左侧：80%；
字体：1.125em“Arial”，无衬线；
字体大小：400；
文本对齐：居中；
文字装饰：无；
颜色：#fff；
背景：rgba（217,67,86,1）；
}
.模态包装器{
宽度：100%；
身高：100%；
位置：固定；
顶部：0；左侧：0；
背景：rgba（255257153,0.75）；
可见性：隐藏；
不透明度：0；
-webkit过渡：所有0.25秒都易于输入输出；
-moz转换：所有0.25秒的易入易出；
-o型过渡：所有0.25秒缓进缓出；
过渡：所有0.25秒缓进缓出；
溢出：隐藏；
列表样式位置：内部；
}
.modal-wrapper.open{
不透明度：1；
能见度：可见；
溢出：隐藏；
列表样式位置：内部；
}
.莫代尔{
宽度：600px；
高度：600px；
显示：块；
利润率：50%0-300px；
位置：相对位置；
顶部：40%；左侧：50%；
背景：#fff；
不透明度：0；
-webkit过渡：所有0.5s易入易出；
-moz转换：所有0.5s的易入易出；
-o型过渡：所有0.5s缓进缓出；
过渡：所有0.5s缓进缓出；
溢出：隐藏；
单词break：打破一切；
}
.modal-wrapper.open.modal{
利润上限：-200px；
不透明度：1；
}
.头{
宽度：90%；
高度：32px；
填充物：1.5em5%；
溢出：隐藏；
背景：#01bce5；
}
.btn关闭{
宽度：32px；
高度：32px；
显示：块；
浮动：对；
}
.btn关闭：：之前，.btn关闭：：之后{
内容：''；
宽度：32px；
高度：6px；
显示：块；
背景：#fff；
}
.btn关闭：：之前{
边缘顶部：12px；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-o变换：旋转（45度）；
变换：旋转（45度）；
}
.btn关闭：：之后{
利润上限：-6px；
-webkit变换：旋转（-45度）；
-moz变换：旋转（-45度）；
-o变换：旋转（-45度）；
变换：旋转（-45度）；
}
.内容{
填充：5%；
}
.扁平按钮{
位置：相对位置；
宽度：150px；高度：60px；
背景：#E74C3C；
保证金：0自动；
边缘顶端：40px；
溢出：隐藏；
z指数：1；
光标：指针；
过渡：颜色。3s；
/*打字错误*/
线高：60px；
文本对齐：居中；
颜色：#fff；
}
.扁平按钮：之后{
位置：绝对位置；
顶部：90%；左侧：0；
宽度：100%；高度：100%；
背景：#C0392B；
内容：“；
z指数：-2；
转变：转变；
}
.平面按钮：悬停：：之后{
转化：translateY（-80%）；
转变：转变；
}
.圆形图像{
边界半径：100%；
高度：280px；
保证金：0自动；
溢出：隐藏；
宽度：280px；
}
.描述{
填充：1em 0；
位置：绝对位置；
最高：40%；
左：70%；
字体：1.125em“Arial”，无衬线；
文本对齐：居中；
文字装饰：无；
利润率：-25px0-75px；
}
.progressbar{
计数器复位：步骤；
}
李先生{
列表样式类型：无；
宽度：15%；
浮动：左；
字体大小：12px；
位置：相对位置；
文本对齐：居中；
文本转换：大写；
颜色：#7d7d7d；
左：350px；
高度：10px；
}
李：以前{
宽度：30px；
高度：30px；
内容：计数器（步骤）；
反增量：步进；
线高：30px；
边框：5px实心#7d7d；
显示：块；
文本对齐：居中；
利润率：200px自动10px自动；
边界半径：50%；
}
李：之后呢{
宽度：100%；
高度：7px；
内容：''；
位置：绝对位置；
背景色：#7d7d7d；
顶部：215px；
左-50%；
}
李：第一个孩子：之后{
内容：无；
}
.progressbar li.active{
颜色：绿色；
}
.progressbar li.活动：之前{
边框颜色：#01bce5；
}
.progressbar li.active+li:after{
背景色：#01bce5；
}
titre先生{
文本对齐：居中；
}

  .progressbar li {
      list-style-type: none;
      width: 15%;
      float: left;
      font-size: 12px;
      position: relative;
      text-align: center;
      text-transform: uppercase;
      color: #7d7d7d;
      left:350px;
      height: 10px;
  }

<div style="clear:both"></div>

<ul class="progressbar">
     <li class="active"></li>
     <li class='pg2'></li>
     <li class="pg3"></li>
  </ul>

.progressbar li {
      list-style-type: none;
      width: 15%;
      float: left;
      font-size: 12px;
      position: relative;
      text-align: center;
      text-transform: uppercase;
      color: #7d7d7d;
        left:20%;
        height: 10px;
  }

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" media="screen and (max-width:768px)" type="text/css" href="./mobile.css">
<link rel="stylesheet" media="screen and (min-width:769px)" type="text/css" href="./desktop.css"> 

body
{
 width: 75%;
}
@media only screen and (max-width: 500px) {
    body {
        width: 91.66%;
    }
}