在上文中我一直用非常簡(jiǎn)單明了的例子來證明技術(shù)的可靠性和可行性。然而，在現(xiàn)有的網(wǎng)站中有很多網(wǎng)站都專門為小屏幕設(shè)備開發(fā)的版本，這種技術(shù)在改進(jìn)這些版本的網(wǎng)站時(shí)是非常容易運(yùn)用的。使用CSS來進(jìn)行頁面布局設(shè)計(jì)的最大賣點(diǎn)之一就是可以為我們的設(shè)計(jì)方案提供可替代的版本。那么我現(xiàn)在就準(zhǔn)備用我自己的商業(yè)網(wǎng)站來做一個(gè)實(shí)驗(yàn)，用這些技術(shù)來實(shí)現(xiàn)網(wǎng)站頁面布局的改進(jìn)。

1. 電腦桌面布局

我的商業(yè)網(wǎng)站目前采用的是多列布局模式。這樣看起來主頁會(huì)有一點(diǎn)不一樣，但是我們使用的是固定寬度的三列布局模式。這是很久之前的一個(gè)設(shè)計(jì)了，所以當(dāng)時(shí)我們?cè)俳ㄔO(shè)這個(gè)網(wǎng)站時(shí)并沒有考慮到媒體資訊庫。

2. 添加新的樣式表

如果想要把現(xiàn)有的布局模式改編成線性布局模式，那么需要更改的東西有很多，所以我準(zhǔn)備通過媒體資訊庫新建一個(gè)獨(dú)立的樣式表，那么只有在最大寬度小于480像素時(shí)，這個(gè)樣式表蔡可以在原先的樣式表加載后運(yùn)行。
      <link rel=" stylesheet" type=' ”text/css media=" only screen and (max-width: 480px), only screen and (max-device -width: 480px) href=”/assets/css/ small -device.css”/>為了創(chuàng)建我的新樣式表，我把網(wǎng)站默認(rèn)樣式表看做網(wǎng)站并將其保存為small-decice.ccs的格式。那么現(xiàn)在它就成了我主要樣式表的一個(gè)副本了。接下來我所要做的就是仔細(xì)檢查并覆蓋原有的代碼規(guī)則然后再把我不需要的東西全部刪掉。

3. 減小頁面頂部面積

我第一件想做的事情就是把頁面頂部的標(biāo)志調(diào)整為最適合小屏幕設(shè)備顯示的大小。因?yàn)闃?biāo)志是一個(gè)背景圖片，所以通過在樣式表中載入一個(gè)新的標(biāo)志就可以順利完成了。我還有一個(gè)與現(xiàn)在不一樣的頂部面積很小的標(biāo)志背景圖片。
      ! background d-image: url (/ img/ small-bg .png);
      }
#wrapper{
! width: auto;
      ! margin: auto;
! text-align: left;
      ! background- image: url (/ img/ small-1ogo.png) ;
      ! background-position: left 5px;
! background-repeat: no-repeat;
      ! min-height: 400px;
}

4. 線性頁面布局

下一個(gè)重點(diǎn)工作就是讓頁面布局線性化并且頁面只允許有一-個(gè)縱向視圖。電腦桌面的頁面布局是通過應(yīng)用浮標(biāo)進(jìn)行的，那么我所要做的就是找到讓列表浮動(dòng)的規(guī)則，然后把它們?cè)O(shè)置為:無浮標(biāo)、寬度自動(dòng)調(diào)節(jié)的模式。這樣設(shè)置會(huì)刪除現(xiàn)存列下面的所有列。
      .article #aside {
! float: none;
! width: auto;

5. 整理設(shè)計(jì)方案

在進(jìn)行了設(shè)計(jì)方案整理后，剩下的事情就是在ProtoFluid中查看頁面布局，合理調(diào)整頁面邊緣空白的數(shù)量，還有對(duì)條列中的空白區(qū)域進(jìn)行補(bǔ)充。因?yàn)榭梢栽赑rotoFluid中使用Firebug，所以蔡能夠讓主要工作流程都圍繞著Firebug展開，現(xiàn)在我可以以非?？鞓返男那槿SS復(fù)制到樣式表。

6. 在iPhone上進(jìn)行測(cè)試

建立和上傳樣式表之后，我要開始檢查它在一臺(tái)真正的移動(dòng)設(shè)備中是如何工作的。在一臺(tái)iPhone上，我發(fā)現(xiàn)網(wǎng)站加載后仍然會(huì)放大畫面，而不是出現(xiàn)我優(yōu)化過的具有良好可讀性的單列縮放狀態(tài)。我迅速在Safari開發(fā)者網(wǎng)站上搜索出現(xiàn)這個(gè)問題的原因---要在網(wǎng)站的開頭增加一個(gè)meta標(biāo)簽，并且根據(jù)設(shè)備屏幕的寬度來設(shè)置視窗的寬度。
       <meta name= ”viewport" content=" width=device-width”/>在設(shè)置了網(wǎng)站的meta標(biāo)簽后，網(wǎng)站頁面在屏幕上就是以單列的模式縮小顯示的。
對(duì)網(wǎng)站進(jìn)行這個(gè)非常簡(jiǎn)單的改進(jìn)說明，我們可以為你的網(wǎng)站增加一個(gè)更簡(jiǎn)單的版本。如果我現(xiàn)在從頭開始建立一-個(gè)網(wǎng)站的話， 我一定會(huì)使用媒體資訊庫，因?yàn)樵趧?chuàng)建網(wǎng)站的過程中它可以為我提供很多種非常有用的方法來簡(jiǎn)化制作過程。例如，加入線性編輯命令，在可以使用Css轉(zhuǎn)換的情況下使用背景圖片或者使用流體圖像。在我們的臺(tái)式電腦上，網(wǎng)頁的布局特征是回旋型的，但是這種布局方法并不適合在用戶觸屏設(shè)備上與內(nèi)容進(jìn)行互動(dòng)。所以，如果瀏覽器顯示窗口非常窄而且并不是回旋型的布局，我就會(huì)嘗試用JavaScript進(jìn)行改進(jìn)。上面所將到的這種方法意昧著我們正在研究. 的停止回旋型網(wǎng)頁加載的產(chǎn)品馬上就要問世了，這種方法可以為小型屏幕手機(jī)的使用者提供- -個(gè)合理的解決方案。今后我還會(huì)繼續(xù)研究如何為移動(dòng)設(shè)備用戶提供回旋型的可替代版本的網(wǎng)站，也許這種交互性更強(qiáng)的方法更設(shè)備用戶提供回旋型的可替代版本的網(wǎng)站，也許這種交互性更強(qiáng)的方法更適合觸屏設(shè)備用戶。

7. 為老式瀏覽器提供媒體資訊庫支持

主要介紹了媒體資訊庫在支持它的設(shè)備上的一些作用。如果你只對(duì)支持iPhone或其他大眾設(shè)備的移動(dòng)Web瀏覽器（例如Opera迷你瀏覽器）感興趣，那么你根本不需要去擔(dān)心你的瀏覽器是否支持某項(xiàng)功能。如果你想要在臺(tái)式電腦瀏覽器里使用媒體資訊庫，那么你會(huì)非常高興地發(fā)現(xiàn)，這里有很多可用的技術(shù)可以通過JavaScript來添加瀏覽器支持，比如IE8瀏覽器（以及更低版本的IE瀏覽器）、火狐瀏覽器3.5和最新的IE9瀏覽器都會(huì)支持CSS3媒體資訊庫。

8. 大膽的嘗試

使用媒體資訊庫是一一個(gè)你在日常生活中可以真正用得.上并用得到CSS3的地方。還有一件需要你記住的事，那就是支持媒體資訊庫的瀏覽器同時(shí)也是支持很多其他的CS3屬性的，所以針對(duì)不同設(shè)備定義的樣式表都可以通過使用另外的CS3來實(shí)現(xiàn)- -個(gè)非常流暢的設(shè)置，那么不管你是在iPhone或者其他設(shè)備上查看，它都會(huì)非常流暢。