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

1. 電腦桌面布局

我的商業(yè)網(wǎng)站目前采用的是多列布局模式。這樣看起來主頁會有一點不一樣，但是我們使用的是固定寬度的三列布局模式。這是很久之前的一個設計了，所以當時我們再建設這個網(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)整為最適合小屏幕設備顯示的大小。因為標志是一個背景圖片，所以通過在樣式表中載入一個新的標志就可以順利完成了。我還有一個與現(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. 線性頁面布局

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

5. 整理設計方案

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

6. 在iPhone上進行測試

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

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

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

8. 大膽的嘗試

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