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;屬性是硬編碼是推動進度條的值正確的...我會推薦使用一個百分比。此外，創建進度條的列表不在模態視圖之外。也許會更好，在裏面。

最後，如果你正在測試響應式設計在head添加這個元標記<meta name="viewport" content="width=device-width, initial-scale=1">。這將有助於您的網站時，它呈現在移動設備上

Answer 2

在HTML代碼中添加

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

前

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

然後換左側：350像素至左：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

。 使用下面的meta標籤在你的代碼

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

如果你的瀏覽器屏幕分辨率小於768px的瀏覽器，如果將呈現mobile.css 導入兩個CSS分辨率超過768瀏覽器會呈現destop.css，你可以檢查你的瀏覽器css here。檢查不同屏幕尺寸的分辨率會讓您更清楚。

詳細瞭解自適應設計，here

說明現在大多數的現代瀏覽器支持％作爲輸入大小的元素，如寬緣高度等使用，而不是PX也將幫助你做出HTML更多的設備更加敏感和屏幕大小。

僅供參考，您還可以使用內置的媒體查詢CSS像