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

Question

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

这是我的代码：

$( document ).ready(function() {
  $('.trigger').click(function() {
     $('.modal-wrapper').toggleClass('open');
    $('.page-wrapper').toggleClass('blur');
     return false;
  });
  $('.go').click(function () {
           $('.pg2').toggleClass('active') ;
  }) ;
  $('.gg').click(function () {
           $('.pg3').toggleClass('active') ;
  }) ;
});

var pageIndex = 1;
showPages(pageIndex);

function nextPage(n) {
  showPages(pageIndex += n);
}

function showPages(n) {
  var i;
  var pages = document.getElementsByClassName("pop");
  if (n > pages.length) {pageIndex = 1}
  if (n < 1) {pageIndex = pages.length}
  for (i = 0; i < pages.length; i++) {
      pages[i].style.display = "none";
  }

  pages[pageIndex-1].style.display = "block";

}

@import url(https://fonts.googleapis.com/css?family=Courgette|Oswald);


@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

html, body{
  width:100%;
  height:100%;
  margin:0;
}
.sent{
  font-family: Dancing Script, Georgia, Times, serif;

  font-size :35px  ;
  text-align: center;
  color:#01bce5 ;
}

.page-wrapper{
  width:100%;
  height:100%;
 background:url(http://feelgrafix.com/data/background/background-1.jpg) center no-repeat;
  background-size:cover;
}

.blur{
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

a.btn{
  width:150px;
  display:block;
  margin:-25px 0 0 -75px;
  padding:1em 0;
  position:absolute;
  top:50%; left:50%;
  font:1.125em 'Arial', sans-serif;
  font-weight:700;
  text-align:center;
  text-decoration:none;
  color:#fff;

  background:rgba(217,67,86,1);
}
a.go{
  width:150px;
  display:block;
  margin:-25px 0 0 -75px;
  padding:1em 0;
  position:absolute;
  top:60%; left:80%;
  font:1.125em 'Arial', sans-serif;
  font-weight:700;
  text-align:center;
  text-decoration:none;
  color:#fff;
  background:rgba(217,67,86,1);
}
a.gg{
  width:200px;
  height: 10px;
  display:block;
  margin:-25px 0 0 -250px;
  padding:1em 0;
  position:absolute;
  top:70%; left:80%;
  font:1.125em 'Arial', sans-serif;
  font-weight:400;
  text-align:center;
  text-decoration:none;
  color:#fff;
  background:rgba(217,67,86,1);
}
.modal-wrapper{
  width:100%;
  height:100%;
  position:fixed;
  top:0; left:0;
  background:rgba(255,257,153,0.75);
  visibility:hidden;
  opacity:0;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  overflow: hidden;
  list-style-position: inside;

}

.modal-wrapper.open{
  opacity:1;
  visibility:visible;
  overflow: hidden;
  list-style-position: inside;
}

.modal{
  width:600px;
  height:600px;
  display:block;
  margin:50% 0 0 -300px;
  position:relative;
  top:40%; left:50%;
  background:#fff;
  opacity:0;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
word-break:break-all;
}

.modal-wrapper.open .modal{
  margin-top:-200px;
  opacity:1;
}

.head{
  width:90%;
  height:32px;
  padding:1.5em 5%;
  overflow:hidden;
  background:#01bce5;
}

.btn-close{
  width:32px;
  height:32px;
  display:block;
  float:right;
}

.btn-close::before, .btn-close::after{
  content:'';
  width:32px;
  height:6px;
  display:block;
  background:#fff;
}

.btn-close::before{
  margin-top:12px;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
}

.btn-close::after{
  margin-top:-6px;
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  transform:rotate(-45deg);
}

.content{
  padding:5%;
}
.flat-button {
  position: relative;
  width: 150px; height: 60px;
  background: #E74C3C;
  margin: 0 auto;
  margin-top: 40px;
  overflow: hidden;
  z-index: 1;
  cursor: pointer;
  transition: color .3s;
  /* Typo */
  line-height: 60px;
  text-align: center;
  color: #fff;
}

.flat-button:after {
  position: absolute;
  top: 90%; left: 0;
  width: 100%; height: 100%;
  background: #C0392B;
  content: "";
  z-index: -2;
  transition: transform .3s;
}

.flat-button:hover::after {
  transform: translateY(-80%);
  transition: transform .3s;
}

.round-image{
  border-radius:100%;
 height: 280px;
 margin: 0 auto;
 overflow:hidden;
 width: 280px;
}

.descrip{
  padding:1em 0;
  position:absolute;
  top:40%;
  left:70%;
  font:1.125em 'Arial', sans-serif;

  text-align:center;
  text-decoration:none;
  margin:-25px 0 0 -75px;

}
.progressbar {
      counter-reset: step;
  }
  .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;


  }
  .progressbar li:before {
      width: 30px;
      height: 30px;
      content: counter(step);
      counter-increment: step;
      line-height: 30px;
      border: 5px solid #7d7d7d;
      display: block;
      text-align: center;
      margin: 200px auto 10px auto;
      border-radius: 50%;


  }
  .progressbar li:after {
      width: 100%;
      height: 7px;
      content: '';
      position: absolute;
      background-color: #7d7d7d;
      top: 215px;
      left: -50%;
  }
  .progressbar li:first-child:after {
      content: none;
  }
  .progressbar li.active {
      color: green;
  }
  .progressbar li.active:before {
      border-color: #01bce5;
  }
  .progressbar li.active + li:after {
      background-color: #01bce5;
  }
.titre{
   text-align: center;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./main.css">
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="./fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="http:////fonts.googleapis.com/css?family=Dancing+Script">


    <title></title>
  </head>
  <body>
    <div class="page-wrapper">
  <a class="btn trigger" href="javascript:;">Popup!</a>
</div>
<div class="modal-wrapper">
  <div class="modal">
    <div class="head">
      <a class="btn-close trigger" href="javascript:;"></a>

    </div>
    <div class="content">
      <div class="container">
          <div class="pop fade">
              <div class="text">
                     <h1 class='sent'>FIRST PAGE  </h1>
              </div>


               <img src="http://i.imgur.com/2ZgHKbQ.jpg" alt="Beach in your dream" class="round-image" >


               <p class='descrip'>Lorem ipsum dolor sit amet, consectetur adipisicing elit </p>
             <a class="btn go" href='javascript:;' onclick='nextPage(1);'>GO!</a>




          </div>
          <div class="pop fade">
              <div class="text">
                     <h3 class="titre">Lorem ipsum dolor sit amet</h3>
              </div>

          <a class="btn gg" href='javascript:;' onclick='nextPage(1);'>GO!</a>
          </div>
          <div class="pop fade">
              <div class="text">
                     <h1 class='sent'>Inscription</h1>
              </div>


          </div>

      </div>
    </div>
  </div>
  <ul class="progressbar">
     <li class="active"></li>
     <li class='pg2'></li>
     <li class="pg3"></li>
  </ul>
</div>
  </body>
  <script  src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript">  </script>
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
  <script src="./index.js" type="text/javascript"></script>

</html>

Answer 1

我认为你的问题在这里：

  .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;
  }

left:350px;属性正在硬编码将进度条推向右侧的值...我建议使用百分比。创建进度条的列表也位于模态视图之外。内心也许会更好。

最后，如果您要测试自适应设计，请在<meta name="viewport" content="width=device-width, initial-scale=1">中添加此元标记head。它可以帮助您的网站在移动设备上呈现

Answer 2

在您的HTML代码中添加

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

之前

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

然后向左更改：350px到左：x％。

.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;
  }

如果您希望您的设计适用于各种尺寸的浏览器，那么为不同的显示尺寸制作不同的CSS必须对您有所帮助。 在代码的 head 中使用以下元标记

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

然后使用媒体查询导入两个css

<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"> 

如果您的浏览器屏幕分辨率小于768px，浏览器将呈现mobile.css 如果分辨率超过768，浏览器将呈现destop.css，您可以检查浏览器css here。检查不同屏幕尺寸的分辨率将更清楚你。

详细了解自适应网页设计here

现在注意大多数现代浏览器支持％作为大小元素的输入，如宽度边距高度等使用此代替px也将帮助您使html对更多设备和屏幕尺寸更具响应性。

仅供参考，您也可以使用css之类的内部媒体查询

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