響應式網頁設計示例

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

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

如果你在使用safari，雖然resizeme（ resizeme.html）的功能類似且免費，但我最愛resize（

視口和螢幕尺寸

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

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

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

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

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

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

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

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

讓我們來看看另乙個例子：視口較寬時（大於1350畫素）**效果如下圖所示：

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

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

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

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

摘自《響應式web設計：html5和css3實戰》

響應式網頁設計示例

響應式網頁設計初探

iPhoneX響應式網頁設計

響應式網頁設計與應用

響應式網頁設計示例

響應式網頁設計初探

iPhoneX響應式網頁設計

響應式網頁設計與應用

相關推薦