jquery - コンテンツの自動サイズ変更 - 1 ページの Web サイト

Question

私は最近、これらのウェブサイトに出くわしました: http://community.saucony.com/kinvara3/およびhttp://www.tokiolab.it

Web サイトを見ると、それらはすべて 1 つのページですが、コンテンツはすべてが 1 つのページであるかのようにスケーリングされます。

1ページのサイトなのにブラウザの解像度（リサイズ時）に合わせてコンテンツが自動で適応してくれるのはいいと思います。

これは新しい技術ですか？そのようなプラグインを書くのは難しいですか、それともすでに存在しますか?

誰かが私を助けてくれることを願っています

score 5 · Accepted Answer

Web サイトをさまざまな画面サイズに適応させることは、Dominic ショーのように、一冊の本であり、簡単な修正ではありません。

複数の積み重ねられたセクションがあり、各セクションが画面の高さであるように思えます。そうですか？

それだけでは、それほど難しくありません。

body 要素と html 要素の幅と高さを設定して、ページを最大化します。html 要素も設定しなければならないのは奇妙ですが、それが人生です。

html, body {
    width:100%;
    height:100%;
}

マークアップでセクションを定義します。

<section>...</section>
<section>...</section>
<section>...</section>

また、セクションのサイズを変更して、ロード時およびページのサイズ変更時に収まるようにします。何かのようなもの：

function draw() {
    var width = $(document).width();
    var height = $(document).height();

    $("section").width(width).height(height);
}

$(document).resize(draw);
$(draw);

セクションにスナップするスクロールも行う場合は、固定するものとページでスクロールするもの、入口と出口のアニメーションなどを定義すると、より複雑になります。あなたのためにそれを行う簡単なプラグインがあることを私は知りません。最も近いのは impress.js (http://bartaz.github.com/impress.js/) かもしれません。