日本一区二区三区在线看|亚洲视频一二最新在线无码|丝袜啪啪高潮喷水秀|久久精品国产九九|影音先锋萱萱影视|福利二区免费播放|五月丁香婷婷丁香视频|丁香五月天激情在线vr|精品国产视频一二三|殴州亚州av另类..

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

為了解決這個(gè)問(wèn)題，可以使用一項(xiàng)技術(shù)來(lái)改善不同屏幕分辨率情況下的內(nèi)容自適應(yīng)問(wèn)題，這也就是“適應(yīng)性流式布局”名稱(chēng)的由來(lái)。接下來(lái)，我們將創(chuàng)建在640 到800 像素，320 到640 像素，240 到320，以及240 像素以下分辨率情況下只是稍有不同的定制布局。同樣，定制的調(diào)整也能夠分別用在800 到1024 像素，1024 到1280，甚至1280 像素以上的情況。

這樣做的好處是顯而易見(jiàn)的，青島網(wǎng)站設(shè)計(jì)師在能夠切換不同布局分辨率的同時(shí)又保持了布局的準(zhǔn)確。無(wú)論是低分辨率還是高分辨率，都能夠很好地處理，同時(shí)保留了空間平衡的設(shè)計(jì)準(zhǔn)則，而不用擔(dān)心用戶(hù)使用何種瀏覽器。

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

s，專(zhuān)門(mén)應(yīng)付那些高分辨率的情況。

這樣做的好處是顯而易見(jiàn)的，設(shè)計(jì)師在能夠切換不同布局分辨率的同時(shí)又保持了布局的準(zhǔn)確。

有了這些樣式文件，我們就可以使用JavaScript 來(lái)做一些簡(jiǎn)單的替換。例如，使用 Kevin Hale 的“ 動(dòng)態(tài)布局技術(shù)（Dynamic Resolution-Dependent LayoutTechnique）”(particletree.com) 或者M(jìn)arac Van Den Dobblesteen 的“SwitchyMcLayout”（alistapart.com）。所有樣式文件的聲明和JavaScript 腳本放在所有頁(yè)面文件的頭部。

注意，因?yàn)檫m應(yīng)性的流式布局依賴(lài)JavaScript，所以需要客戶(hù)端支持JavaScript，這樣腳本才能探測(cè)用戶(hù)瀏覽器的分辨率，并且進(jìn)行相應(yīng)的切換。

“支持變量的固定寬度布局”（Variable fixed-width layout）是由Richard Rutter開(kāi)發(fā)的，基于Simon Collison 布局的相似技術(shù)（在“Redesign Notes 1 ：Width-Based Layout”中進(jìn)行過(guò)討論，colly.com）。屏幕尺寸發(fā)生變化時(shí)，布局和字體也相應(yīng)地變化。布局尺寸實(shí)時(shí)地發(fā)生變化，所以如果你調(diào)整了瀏覽器的尺寸，布局會(huì)隨之變化以適應(yīng)新尺寸。

就像之前提到的那樣，流式布局的一個(gè)普遍問(wèn)題是文本要么變得很長(zhǎng)、要么被擠到一團(tuán)導(dǎo)致布局的可讀性很差。在窄屏幕中，文本之間過(guò)大的空白是大的問(wèn)題，當(dāng)然相反的極端情況也同樣讓用戶(hù)很頭疼?？梢允褂么髮挾群托挾葋?lái)解決這個(gè)問(wèn)題，但是這樣的話(huà)，布局就被轉(zhuǎn)換為寬度部分固定的布局，喪失了總體的靈活性。Tinned Fruits 的文本縮放技術(shù)（tinnedfruit.com）基于JavaScript，根據(jù)用戶(hù)瀏覽器的寬度自動(dòng)調(diào)整文本的尺寸。當(dāng)屏幕變寬時(shí)，字體就變大。相反，屏幕變窄時(shí)，字體就變小。另外，可以設(shè)置大和小的字體尺寸防止奇怪的情況發(fā)生。更進(jìn)一步，設(shè)計(jì)師甚至可以決定哪些元素受到文本縮放的影響，哪些元素免受影響。

我們可以向網(wǎng)頁(yè)中添加基于JavaScript 的字體縮放。在頁(yè)面中插入下面的代碼，根據(jù)情況進(jìn)行適當(dāng)修改。

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