0

我正在使用 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;
            }
4

2 回答 2

1

我自己想通了。

我添加了另一个 CSS 字符串

header img {
width:100%;
}

这成功了

于 2013-05-04T13:11:16.803 回答
0

首先，下次你想创建一个响应式网站时，可能值得检查一下基础。在我看来，它是最好的响应式样板。看到您已经打开了一个页面并且可能不想在这里重新开始，这是指向 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 那么这个等等。

于 2013-05-01T08:01:07.647 回答