如何使視差響應？

Question

我正在使用jQuery插件plax：https://github.com/cameronmcefee/plax

我做了我自己的例子，並希望它是響應式的。現在，這個位置對於CSS中的移動元素是絕對的，但我需要它是相對的，所以我可以使它響應。

但我不能讓它的工作

見我的小提琴：http://jsfiddle.net/FfKgY/

我認爲這個問題是與CSS：

  #shell { 
      display: block; 
      position: relative; 
      margin: 100px auto; 
      width: 100%; 
      max-width: 318px; 
      height: 100%; 
      max-height: 318px; 
      z-index: 1; 
      } 

      #plax-logo { 
      width: 136px; 
      height: 70px; 
      position: absolute; 
      top: 170px; 
      left: 90px; 
      z-index: 3; 
      background:#099; 
      } 

      #plax-sphere-1 { 
      width: 93px; 
      height: 92px; 
      position: absolute; 
      z-index: 4; 
      top: 189px; 
      left: 191px; 
      background: #3CC; 
      } 

      #plax-sphere-2 { 
      width: 215px; 
      height: 215px; 
      position: absolute; 
      z-index: 2; 
      top: 100px; 
      left: 53px; 
      background: #3C9; 
      } 

      #plax-sphere-3 { 
      width: 93px; 
      height: 92px; 
      position: absolute; 
      top: 35px; 
      left: 32px; 
      z-index: 1; 
      background: #669; 
      } 

Answer 1

我想出了自己。

我又增加了CSS串

header img { 
width:100%; 
} 

這奏效了

Answer 2

第一下一次出要做一個敏感的網站，它可能是值得檢查出foundation在我看來，這是最好的響應式樣板。看到你已經有了一個頁面，可能不想重新開始here是一個鏈接到Stack-overflow的另一篇文章，你可能看起來很有用。歡呼聲中，馬可

---

編輯

---

if($(window).width() < 1670 && $(".banner").height() < 1253) 
{ 
    var bannerContent = $(".title").html() + $(".social").parent().html(); 
    $(".banner").html(bannerContent); 
} 
else 
{ 
    var bodyContent = $(".title").parent().html(); 
    $("body").html(bodyContent); 
} 

您可以使用此代碼對整個網頁縮小其內容。正如你可以看到：如果窗口寬度= < 1670那麼這個，否則如果寬度= < 1500那麼這等等