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/）。

Answer 2

你所关注的原则是响应式设计，关于它的文章很多。

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

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

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

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

Answer 3

像Val说的那样，更多的是关于滚动效果而不是页面大小。

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

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

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

3 个答案: