Question

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

我已经做了我自己的例子，并希望它能够做出回应。现在这个位置对于css中的移动元素是绝对的，但是我需要它是相对的，所以我可以让它响应。

但我无法让它发挥作用

我认为问题在于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溢出的另一个帖子，你可能看起来很有用。干杯，马可

修改

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

您可以将此代码用于整个页面以缩小其内容。如您所见：如果窗口宽度=＆lt; 1670然后这个，否则如果width =＆lt; 1500那么等等等。

如何使视差响应？

2 个答案: