涩涩爱在线观看-涩涩www在线观看免费高清-涩色综合-涩色影院-国产成人精品视频免费-国产成人精品视频播放

盡管流式設計可以適應很多種不同的分辨率，但是仍有一個通病，在分辨率太低（比如手機或者PDA 設備）或者太高的情況下，界面看起來就有點可笑。例如，一個三欄布局的頁面在只有240 像素的PDA 屏幕中看起來就會非常糟糕。另外，如果設置了“小寬度”，布局中可能會包含一個水平的滾動條，這讓閱讀變得很不流暢。

為了解決這個問題，可以使用一項技術來改善不同屏幕分辨率情況下的內容自適應問題，這也就是“適應性流式布局”名稱的由來。接下來，我們將創建在640 到800 像素，320 到640 像素，240 到320，以及240 像素以下分辨率情況下只是稍有不同的定制布局。同樣，定制的調整也能夠分別用在800 到1024 像素，1024 到1280，甚至1280 像素以上的情況。

這樣做的好處是顯而易見的，青島網站設計師在能夠切換不同布局分辨率的同時又保持了布局的準確。無論是低分辨率還是高分辨率，都能夠很好地處理，同時保留了空間平衡的設計準則，而不用擔心用戶使用何種瀏覽器。

要建立這種類型的布局，需要準備兩件事。為每種范圍的分辨率準備分離的樣式文件和一種獲取用戶屏幕分辨率的方法。第一件事情就是創建一些列可替換的布局文件。例如，一個文件命名為 narrow.css，在非常低的分辨率情況下使用。另外一個命名為 normal.css，在普通的分辨率情況下使用。第三個命名為 wide.cs

s，專門應付那些高分辨率的情況。

這樣做的好處是顯而易見的，設計師在能夠切換不同布局分辨率的同時又保持了布局的準確。

有了這些樣式文件，我們就可以使用JavaScript 來做一些簡單的替換。例如，使用 Kevin Hale 的“ 動態布局技術（Dynamic Resolution-Dependent LayoutTechnique）”(particletree.com) 或者Marac Van Den Dobblesteen 的“SwitchyMcLayout”（alistapart.com）。所有樣式文件的聲明和JavaScript 腳本放在所有頁面文件的頭部。

注意，因為適應性的流式布局依賴JavaScript，所以需要客戶端支持JavaScript，這樣腳本才能探測用戶瀏覽器的分辨率，并且進行相應的切換。

“支持變量的固定寬度布局”（Variable fixed-width layout）是由Richard Rutter開發的，基于Simon Collison 布局的相似技術（在“Redesign Notes 1 ：Width-Based Layout”中進行過討論，colly.com）。屏幕尺寸發生變化時，布局和字體也相應地變化。布局尺寸實時地發生變化，所以如果你調整了瀏覽器的尺寸，布局會隨之變化以適應新尺寸。

就像之前提到的那樣，流式布局的一個普遍問題是文本要么變得很長、要么被擠到一團導致布局的可讀性很差。在窄屏幕中，文本之間過大的空白是大的問題，當然相反的極端情況也同樣讓用戶很頭疼。可以使用大寬度和小寬度來解決這個問題，但是這樣的話，布局就被轉換為寬度部分固定的布局，喪失了總體的靈活性。Tinned Fruits 的文本縮放技術（tinnedfruit.com）基于JavaScript，根據用戶瀏覽器的寬度自動調整文本的尺寸。當屏幕變寬時，字體就變大。相反，屏幕變窄時，字體就變小。另外，可以設置大和小的字體尺寸防止奇怪的情況發生。更進一步，設計師甚至可以決定哪些元素受到文本縮放的影響，哪些元素免受影響。

我們可以向網頁中添加基于JavaScript 的字體縮放。在頁面中插入下面的代碼，根據情況進行適當修改。

在Soh Tanaka 的文章“Smart Columns with CSS and JQuery”（sohtanaka.com）中，作者提出了一種類似的技術。為了獲得好的瀏覽體驗，通過腳本來修改DIV 的寬度，同時根據瀏覽器當前的尺寸決定顯示列數的多少（根據瀏覽器尺寸的變化）。使用JQuery 腳本清除所有列的多余空白，然后平均分配給現有的列。這項技術是自適應流式布局的一個好例子，特別適用于那些對瀏覽器不是一視同仁，而是自己調整瀏覽器尺寸的用戶。