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

1. 電腦桌面布局

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

2. 添加新的樣式表

如果想要把現(xiàn)有的布局模式改編成線性布局模式，那么需要更改的東西有很多，所以我準備通過媒體資訊庫新建一個獨立的樣式表，那么只有在最大寬度小于480像素時，這個樣式表蔡可以在原先的樣式表加載后運行。
      <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)站默認樣式表看做網(wǎng)站并將其保存為small-decice.ccs的格式。那么現(xiàn)在它就成了我主要樣式表的一個副本了。接下來我所要做的就是仔細檢查并覆蓋原有的代碼規(guī)則然后再把我不需要的東西全部刪掉。

3. 減小頁面頂部面積

我第一件想做的事情就是把頁面頂部的標志調(diào)整為最適合小屏幕設(shè)備顯示的大小。因為標志是一個背景圖片，所以通過在樣式表中載入一個新的標志就可以順利完成了。我還有一個與現(xiàn)在不一樣的頂部面積很小的標志背景圖片。
      ! 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. 線性頁面布局

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

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

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

6. 在iPhone上進行測試

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

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

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

8. 大膽的嘗試

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