2

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

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

我认为内容如何自动适应浏览器的分辨率（调整大小时）很好，即使它是一个单页网站。

这是一种新技术吗？编写这样的插件很难还是它们已经存在？

希望可以有人帮帮我

4

3 回答 3

5

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

于 2012-04-16T14:33:56.580 回答
0

您正在查看的原则是响应式设计，有关它的文章很多。

一本好书是http://www.abookapart.com/products/responsive-web-design

文章：http ://www.alistapart.com/articles/responsive-web-design/

此外，如果您想改造某些功能，您可以使用媒体查询

http://www.w3.org/TR/css3-mediaqueries/

于 2012-04-16T08:51:53.507 回答
0

正如 Val 所说，与滚动效果有关，而不是页面大小。

这两个例子看起来都像 Scrollorama 页面 (http://johnpolacek.github.com/scrollorama/)

另一个不错的是http://www.nikebetterworld.com/product。

于 2012-04-16T08:53:20.943 回答