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

Question

我最近遇到过这些网站:http://community.saucony.com/kinvara3/和http://www.tokiolab.it

如果您查看网站,它们都是一个页面,但内容可以像所有单页一样进行缩放.

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

这是一种新技术吗？编写这样的插件是否很难或者它们是否存在？

希望可以有人帮帮我

Answer 1

让网站适应各种屏幕尺寸,就像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/).