如何使jQuery腳本和CSS響應？

我的問題是，我不知道如何使它響應... 如果你打算在較小的屏幕上調整它的大小，它將無法正常工作。

HTML

<div id="main-page"> 
      <div class="maincontent"> 
       <h1>Full Page Transition</h1> 
        <a href="#" class="back">&#8592 Back to the ARTICLE</a> 
       <a class="mainlink">TRY IT NOW &#10140;</a> 

      </div> 
     </div> 

     <div id="next-page"> 
      <div class="nextcontent"> 
       <h1>Great! You're in the 2nd Page!</h1> 
        <a href="#" class="back">&#8592 Back to the ARTICLE</a> 
       <a class="nextlink"> &#8592 GO BACK</a> 
      </div> 
     </div>

CSS

/* GENERAL STYLES 
-------------------------------------------------*/ 

body { 
width: 100%; 
} 


h1 { 
    font-family: 'Raleway'; 
    font-weight: bold; 
    text-align: center; 
    font-size: 50px; 
    color: #fff; 
    margin-top: 120px; 
} 



/* PAGES 
-------------------------------------------------*/ 

#main-page { 
    height: 25px; 
    width: 375px; 
    position: absolute; 
    top: 0; bottom: 0; left: 0; right: 0; 
    margin: auto; 
    background-color: #27ae60; 
    display: none; 
} 


#next-page { 
    height: 25px; 
    width: 375px; 
    position: absolute; 
    top: 0; bottom: 0; left: 0; right: 0; 
    margin: auto; 
    background-color: #e74c3c; 
    display: none; 
} 

.maincontent, .nextcontent { 
    padding-top: 40px; 
    display: none; 
} 

a.back{ 
    font-family: 'Lato'; 
    font-size: 20px; 
    color: #dfdfdf; 
    text-decoration: none; 
    text-align: center; 
    width: 20%; 
    margin: 25px auto 30px auto; 
    display: block; 
} 



a.mainlink, a.nextlink { 
    font-family: 'Lato'; 
    color: #fff; 
    border: 3px solid #fff; 
    padding: 15px 10px; 
    display: block; 
    text-align: center; 
    margin: 25px auto; 
    width: 13%; 
    text-decoration: none; 
    cursor: pointer; 
    font-size: 20px; 
    font-weight: 500; 

} 

a.mainlink:hover, a.nextlink:hover{ 
    background: #fff; 
    color: #575757; 
}

的JavaScript/jQuery的

$(document).ready(function() { 

    $.fn.animateRotate = function(angle, duration, easing, complete) { 
     var args = $.speed(duration, easing, complete); 
     var step = args.step; 
     return this.each(function(i, e) { 
     args.complete = $.proxy(args.complete, e); 
     args.step = function(now) { 
      $.style(e, 'transform', 'rotate(' + now + 'deg)'); 
      if (step) return step.apply(e, arguments); 
     }; 

     $({deg: 0}).animate({deg: angle}, args); 
     }); 
    }; 

    $("#main-page").css("background-color", "#e74c3c"); 
    $("#main-page").css("height", "100vh"); 
    $("#main-page").css("width", "100%"); 
    $("#main-page").fadeIn(); 
    $(".maincontent").fadeIn(); 

    $(".mainlink").on("click", function() { 
     $(".maincontent").fadeOut(); 
     $("#main-page").animate({ 
      width: "25px", 
      height: "375px" 
     }, function() { 
      $(this).animateRotate(90); 
     }); 

     setTimeout(function() { 
      $("#main-page").fadeOut();  
     }, 1500); 

     setTimeout(function() { 
      $("#next-page").animateRotate(0, 0); 
      $("#next-page").css("height", "25px"); 
      $("#next-page").css("width", "375px"); 
      $("#next-page").fadeIn(); 
      $("#next-page").animate({ 
       backgroundColor: "#27ae60" 
      }, function() { 
       $(this).animate({ 
        height: "100vh" 
       }, function() { 
        $(this).animate({ 
         width: $("body").width() 
        }, function() { 
         $(".nextcontent").fadeIn(300); 
        }); 
       }); 
      }); 
     }, 800); 
    }); 

    $(".nextlink").on("click", function() { 
     $(".nextcontent").fadeOut(); 
     $("#next-page").animate({ 
      width: "25px", 
      height: "375px" 
     }, function() { 
      $(this).animateRotate(-90); 
     }); 

     setTimeout(function() { 
      $("#next-page").fadeOut();   
     }, 1500); 

     setTimeout(function() { 
     $("#main-page").animateRotate(0, 0); 
     $("#main-page").css("height", "25px"); 
     $("#main-page").css("width", "375px"); 
      $("#main-page").fadeIn(); 
      $("#main-page").animate({ 
       height: "100vh" 
      }, function() { 
       $(this).animate({ 
        width: $("body").width() 
       }, function() { 
        $(".maincontent").fadeIn(300); 
       }); 
      }); 
     }, 1400); 
    }); 

});

我怎樣才能使它響應，因此T整個動畫甚至可以在較小的視口上工作（just like this）？

JSFIDDLE

來源

2015-06-22 Sam Norton

也許會縮小它，你可以使用'transform：scale（0.x）'？ –

我建議您對如何製作響應式頁面進行一些研究，這將有助於您瞭解潛在答案對您的網頁的真正作用，也許可以幫助您自己找到解決方案。你是否嘗試過讓頁面響應自己？如果是這樣，你能告訴我們嗎？ –