自動調整大小的內容 - 一個頁面的網站

最近，我在這些網站：http://community.saucony.com/kinvara3/和http://www.tokiolab.it 自動調整大小的內容 - 一個頁面的網站

如果你看一下網站的，他們都是一個頁面，但內容秤，彷彿這一切都是單頁。

我認爲這是很好如何內容自動適應瀏覽器的分辨率（調整大小時），即使它是一個頁面的網站。

這是一種新技術嗎？編寫這樣一個插件是困難的還是已經存在？

希望有人能幫助我

來源

2012-04-16 idbranding

爲什麼拇指向下:( - 我在這裏學習。如果我看到一些很酷的東西在網上我問路學習/實現這些功能 – idbranding 2012-04-16 09:33:31

在冠冕堂皇的拍拍風險，CSS有百分爲單位類型它可以用來按照包含元素的百分比來排列東西。 – ben 2012-04-16 08:55:05

任何方向讓我更瞭解這個？ – idbranding 2012-04-16 09:00:55

使網站適應各種屏幕尺寸的是，像多米尼克顯示，一整本書，不是一蹴而就的事情。

這聽起來像你只是希望有多個堆疊的部分，每個部分是屏幕的高度。是對的嗎？

也就是說，獨自一人，是不是太難了：

設置對身體和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-16 14:33:56 nicholas

首先，感謝您的開始！我會嘗試它，並與一個jsfiddle來... – idbranding 2012-04-16 15:12:26

你正在尋找的原則是響應式設計，有一噸左右關閉它的文章。

好書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-16 08:51:53

這個網站根本沒有反應。它只是一個滾動頁面的奇特方法。 – 2012-04-16 08:54:54

我知道響應，但這些網站似乎並沒有使用mediaqueries – idbranding 2012-04-16 08:59:15

響應不必使用媒體查詢，只是個單位等等。我知道網站頂部不響應@RoryMcCrossan但最好的方法是使用repsonsive設計 – 2012-04-16 09:22:25

像瓦爾說，更多的工作要做滾動效果比頁面大小。

兩個那些例子看起來像Scrollorama頁（http://johnpolacek.github.com/scrollorama/）

另一個好消息是http://www.nikebetterworld.com/product。

來源

2012-04-16 08:53:20 nicholas

我知道滾動事件是如何完成的，我只是好奇如何調整大小的工作，如果你看看這些網站的內容自動適合瀏覽器的高度/寬度，雖然它是一個單一的網頁。 – idbranding 2012-04-16 09:00:09

自動調整大小的內容 - 一個頁面的網站

回答

相關問題