jquery - 自动调整内容大小 - 一页网站

Question

我最近发现了这些网站:http://community.saucony.com/kinvara3/和 http://www.tokiolab.it

如果您查看该网站，它们都是一页，但内容会缩放，就好像它们都是单页一样。

我认为即使它是一个单页网站，内容也会自动适应浏览器的分辨率(调整大小时)，这很好。

这是一项新技术吗？编写这样的插件很难吗？或者它们已经存在了吗？

希望有人能帮助我

Answer 1

让网站适应各种屏幕尺寸，就像多米尼克的节目一样，需要一整本书，而不是一个快速解决方案。

听起来您只是想拥有多个堆叠部分，每个部分都是屏幕的高度。是对的吗？

仅此一点并不太难:

设置 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/)。