響應式網頁設計示例

若要全方位測試你自己或別人的響應式網站，則需要針對每一種裝置和不同的螢幕尺寸，分別準備不同的測試系統。儘管這是最完美的辦法，但通過改變瀏覽器視窗大小其實就可以完成大多數測試。除此之外，還有很多第三方外掛和瀏覽器擴充套件可供選擇，通過它們可以將當前瀏覽器視窗或視口設定為指定畫素。必要時，還可以自動將當前瀏覽器視窗或視口切換成為預設大小（如1024×768畫素）。這樣你就可以輕鬆地測試不同螢幕視口尺寸下的網站效果。

迷戀畫素？忘了它吧！

進入了響應式網頁設計的教堂，就不要再迷戀畫素（px）這個度量單位，因為大多數情況下我們不會用畫素，而會使用相對度量單位（em或百分比）。相對單位更方便我們審查其他響應式設計作品，檢視設計的變更之處。

Internet Explorer使用者請下載安裝Microsoft Internet Explorer Developer Toolbar，下載地址如下：
http://www.microsoft.com/download/en/details.aspx?id=18359

如果你在使用Safari，雖然ResizeMe（http://web.me.com/aaronholla/Safari_Extensions/ ResizeMe.html）的功能類似且免費，但我最愛Resize（http://resizeSafari.com）。

Firefox使用者請下載Firesizer（https://addons.mozilla.org/en-US/firefox/addon/firesizer/），Chrome請下載Windows Resizer（https://chrome.google.com/webstore/detail/ kkelicaakdanhinjdeammmilcgefonfh）。

不喜歡使用瀏覽器擴充套件？還有一個方法：我寫了個簡單HTML頁面來顯示瀏覽器視窗的當前視口高度和寬度。頁面用了jQuery框架，獲取當前的視口的高度和寬度並顯示出來。你可以在瀏覽器新標籤頁中開啟這個頁面，調整視窗大小，然後切回你要測試的頁面檢視效果。這個超級簡單的“What size is my viewport page?”頁面地址如下：
http://benfrain.com/easily-display-the-viewport-size-of-your-page-for-responsive-designs/

視口和螢幕尺寸

視口和螢幕尺寸不是同一個概念。視口是指瀏覽器視窗內的內容區域，不包含工具欄、標籤欄等。也就是網頁實際顯示的區域。螢幕尺寸指的是裝置的物理顯示區域。需要注意的是有些瀏覽器調整工具顯示的尺寸包含瀏覽器的其他元素，諸如位址列、標籤欄和搜尋欄，而有些工具則不是這樣。在下面的截圖中，實際的視口尺寸顯示在右上角（1156×921畫素），同時Firesizer外掛將視窗尺寸顯示在右下角（1171×1023畫素）。

現在，我們帶著所有需要的工具，開始鑑賞最好的響應式網站。啟動你鍾愛的瀏覽器，開啟瀏覽器調整工具，訪問http://thinkvitamin.com/ 。

如果你的視口寬度大於1060畫素，你會看到如下圖所示的佈局：

如果你的視口寬度介於930畫素到1060畫素之間，你會看到如下圖所示佈局：

注意看logo旁邊的主導航選單是如何變化的。主內容區右側的圖示一個挨著一個排列，介面上的一切都合理可用，最重要的是，沒有一樣從螢幕上溢位。現在讓我們再看看視口寬度小於880畫素的效果，截圖如下：

頭部的效果基本沒變，但注意右側的側邊欄還是變窄了一些。圖示排成了2行2列，同時文字塊做了適當調整，其中的文字流相應地發生變化。

不過，將視口寬度減小到小於600畫素，你就會發現一個重大的變化，如下圖所示：

怎麼樣？整個側邊欄對我們的新視口做出了響應，網站最重要的內容區佔據了整個瀏覽器視窗寬度。注意看頭部的導航連結現在是水平排列的，而不是被放在logo的旁邊。另外，logo本身的大小也做了調整。以上所有的這些變化有助於根據視口尺寸為使用者建立更好的體驗。

讓我們來看看另一個例子：http://2011.dconstruct.org/。視口較寬時（大於1350畫素）網站效果如下圖所示：

請特別注意那9張圖的排列格式。當你減小視口寬度時（小於960畫素），注意看介面發生了什麼變化。三行三列的圖片排列方式變成了三行兩列外加下方一行三列，如下圖所示：

繼續減小視口寬度，在小於720畫素的時候我們會遇到另一個設計“斷點”。頭部導航連結轉換成了帶圖片的導航區域，這為觸屏導航提供了更好的操作區域：

繼續減小視口寬度，當小於480畫素時，圖片排列方式又變成了第一行2張圖片，第二行3張，第三行4張。這些圖片的大小在視口寬度縮小至大約300畫素時又發生了變化。下面的截圖顯示了其在iPhone上的效果：

推薦一個響應式設計創意收集網站：http://mediaqueri.es。雖然這裡收集的網站並不是全部都採納完整的響應式方法論，即先針對小視口進行設計，然後逐步針對大視口進行漸進增強支援。但就目前來看，響應式設計方法興起的時間不長，再考慮到響應式網頁設計的各種可能性，這裡確實有很多能讓我們汲取創意的範例。儘管調整視口大小來瀏覽網站能說明響應式網頁設計的理念，但這沒有展示出HTML5的優勢。HTML5的優勢事實上在幕後發揮。所以讓我們將注意力轉移到幕後，來了解一下HTML5的優秀之處。

本文摘自《響應式Web設計：HTML5和CSS3實戰》