創(chuàng)建這種類型的布局，我們要做兩件事：為每一范圍分辨率的屏幕設(shè)立單獨(dú)的樣式;第二是確定用戶屏幕的分辨率。對(duì)此，Kevin Hale 在文章 Dynamic Resolution-Dependent Layout Technique 中作過(guò)詳細(xì)的介紹。

　　第一步是創(chuàng)建一系列可替代的布局文件。例如，一個(gè)稱之為narrow.css，其針對(duì)小分辨率的屏幕。另一個(gè)可稱之為normal.css，適應(yīng)于傳統(tǒng)的分辨率屏幕，第三可稱之為wide.css，將處理較大分辨率的屏幕。

　　我們可以使用js根據(jù)預(yù)設(shè)的樣式表作簡(jiǎn)單的改動(dòng)，Dynamic Resolution Dependent Layouts 在演示頁(yè)中使用js解釋了如何使用它，于其它類型布局一樣，所有樣式和js文件都放在頭部。

　　title="narrow"/>

　　title="wide"/>

　　注意到所有三個(gè)鏈接樣式單的title屬性：“narrow”、“default”、“wide”，在js源文件中查看DynamicLayout() 函數(shù)?？梢钥吹?，我們會(huì)很容易的根據(jù)每個(gè)title屬性來(lái)調(diào)用相應(yīng)的樣式，以及如何改變相應(yīng)的寬度。

　　function dynamicLayout(){

　　var browserWidth = getBrowserWidth();

　　// Narrow CSS rules

　　if (browserWidth < 640){

　　changeLayout("narrow");

　　}

　　// Normal (default) CSS rules

　　if ((browserWidth >= 640) && (browserWidth <= 960)){

　　changeLayout("default");

　　}

　　// Wide CSS rules

　　if (browserWidth > 960){

　　changeLayout("wide");

　　}

　　}

　　這種技術(shù)很容易實(shí)現(xiàn)，能夠與其它技術(shù)一起創(chuàng)建更多的可用性布局。仔細(xì)查看js，可以看到更多細(xì)節(jié)。

　　相似的技術(shù)

　　對(duì)于類似的技術(shù)，可以參閱 Brand Spanking New 的 Dynamic layouts with adaptive columns，他使用了大致相同的代碼，但略微不同，幸好有更多的選擇和腳本實(shí)例得到同樣的自適應(yīng)內(nèi)容。

　　要下載此版本自適應(yīng)內(nèi)容的腳本，請(qǐng)到 Dynamic layouts with adaptive columns。

　　這種概念并不難，關(guān)于此技術(shù)每個(gè)開發(fā)者都有自己的腳本，Clagnut.com博客的回帖中有更多關(guān)于自適應(yīng)內(nèi)容的布局和腳本--“Variable fixed width layout“，在其回帖中甚至有一種技巧無(wú)需任何腳本--CSS Drop Column Layout

最新評(píng)論