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

0

次にレスポンシブ Web サイトを作成する場合は、最初にFoundationをチェックする価値があるかもしれません。私の意見では、これは最もレスポンシブなボイラープレートです。すでにページを作成していて、最初からやり直したくないと思われる方は、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 に答える