響應式網(wǎng)頁設計，這個概念在國外相當火熱。不管是交互設計，視覺，前端開發(fā)都投入到這個老意識新概念的技術當中。

首先我們看下什么是響應式網(wǎng)頁設計。它為用戶從他們的電腦切換到iPad、iPhone、黑莓、HTC、平板電腦等等，該網(wǎng)站能自動切換適應的分辨率，圖像大小和腳本。換句話說，該網(wǎng)站能自動響應用戶的喜好。通俗點說法就是有求必應的網(wǎng)頁！
 
它不僅僅是一種趨勢，而是一個新的設計解決方案！它有助于解決不同的分辨率和設備（臺式電腦，筆記本電腦，平板，手機）相關的設計問題。

前面說了，其實這個是一個設計問題，既然是設計的問題，這里就會涉及到很多層面的角色，包括交互設計師，視覺設計師，前端工程師，后臺開發(fā)工程師。交互設計師，要滿足各自不通分辨率和設備的頁面布局展現(xiàn)方式。而視覺設計師，則要考慮到頁面性能和移動端帶寬問題，權衡下頁面的酷炫效果和視覺色彩的運用。而前端和后臺開發(fā)工程師，則要完成滿足視覺需求和交互功能，更要考慮到頁面加載性能和消耗帶寬問題，更重要的是移動端安全性能方面！

下面我們來做一個簡單的響應式網(wǎng)頁。Demo預覽

大家可以用Chrome縮小下瀏覽器窗口看看頁面布局是如何變化的。當然，你通過手機來查看頁面布局效果更佳。

我們做響應式網(wǎng)頁，首先必須要滿足桌面各個瀏覽器版本下正常顯示頁面。其次才考慮以webkit為內(nèi)核的手機終端瀏覽器效果。由于IOS和Android瀏覽器都是webkit內(nèi)核的，這里的響應我們就不考慮ie9以下版本的瀏覽器了。

這個例子我們是以GDC博客為原型。它默認一個固定寬度為980px的網(wǎng)頁，當瀏覽器窗口比980px小的時候，這個布局就變?yōu)?00%比寬度的液態(tài)布局，而不是固定寬度。當瀏覽器窗口再縮小于650px的時候，我們就隱藏側邊欄。當窗口小于480的時候，橫向?qū)Ш綏l隱藏，換成點擊下拉效果的導航條。

如上圖，從左至右依次為移動版本—>平板電腦—>桌面瀏覽器的效果。

首先，我們來看下html結構

這個是一個很典型的博客模版結構。一個wrapper容器包含了頭部、內(nèi)容、側欄、底部。

下面我們針對移動設備加入這個meta標簽。告訴webkit內(nèi)核瀏覽器初始縮放比例為1。（很多iOS和Android的瀏覽器都是基于webkit內(nèi)核的）

1 <meta name="viewport" content="width=device-width; initial-scale=1.0">

在這個頁面中用了html5文檔聲明，用到了很多html5標簽，但是這些標簽在ie9以下版本是不支持的，所以我們必須引用一個html5.js文件使得這些標簽被其它低版本瀏覽器確認。

1 2 3 <!--[if lt IE 9]>     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

在這里我不想講到正常頁面下的布局如何寫了。主要講解下媒體查詢media queries這個css的設計思路。這個是css3的屬性，也是我們這個響應式網(wǎng)頁設計的最有趣，最重要的部分。

1 <link href="media_queries.css" rel="stylesheet" type="text/css">

下面我們用CSS3的媒介查詢（Media Query）特性使得網(wǎng)頁適應不同設備，即根據(jù)設備的分辨率和縮放自動重新布局。

1 2 3 4 5 @media screen and (max-width: 480px) { 這里就是重新設定一些css的屬性 }

當瀏覽器窗口小于980px的時候

1 2 3 #wraper { width: 95%;}重新設定容器寬度為95% #content { width: 60%; padding: 3% 4%;}重新設定內(nèi)容寬度為60% #sidebar { width: 30%;}重新設定側邊欄寬度為30%

這里用到了%，使得頁面是一個流體布局。

當瀏覽器窗口小于650px的時候

1 2 #content { width: auto;float: none;margin: 20px 0;} #sidebar { display:none; width: 100%; margin: 0; float: none; }

容器寬度繼承了上面95%的寬度，這個時候我們設定內(nèi)容寬度為自動，使其填滿外部的wraper容器。并清除其浮動樣式。這個時候的瀏覽的頁面，可以權衡下右邊側欄的重要程度，如果覺得有必要繼續(xù)在頁面中顯示，我們可以清除其浮動，并把寬度也設為100%，這樣就在content這個容器下顯示。但是一般的話，在這么小的瀏覽窗口中，用戶只想看到最主要的內(nèi)容，右邊側欄成為了一個補助模塊，那么可以直接把它隱藏掉。這樣可以減少頁面的高度。

當瀏覽器窗口小于480px的時候，一般這個就是iPhone的橫向?qū)挾取?/strong>

首先我們設計webkit內(nèi)核瀏覽器下禁用文字大小調(diào)整

1 html { -webkit-text-size-adjust: none; }

其實在480px寬度下的時候，整體框架布局已經(jīng)不用設置，我們考慮得更多是怎么把一個良好的頁面布局展示給用戶。而在這個模式下，如果導航條有很多選項的時候，就會相互堆疊換行，那么這里我們設計成點擊出下拉菜單形式。

這里我們首先考慮在小設備窗口下header太高已經(jīng)占據(jù)了大半的屏幕顯示，所以這里我們重新設定下header的高度，能完整呈現(xiàn)出這個站點logo就可以了。在480px小設備窗口下瀏覽，頁面內(nèi)容會很長，這個時候我們要在底部加個返回頁面頂部的按鈕。

關于彈性圖片，我們這里用到了簡單的 img { max-width: 100%; }。但是有個問題，如果圖片過大會影響其加載速度，更會造成對存儲空間的浪費。當然，這里有個響應式圖片的技術思路，大家可以看看：demo

總體來說，響應式網(wǎng)頁設計是一種新的網(wǎng)頁設計思路，我們滿足不同設備下的瀏覽模式，達到俱佳的體驗效果。

下面給大家推薦一個收集響應式網(wǎng)頁設計的網(wǎng)站：http://mediaqueri.es/這里推薦了一些比較優(yōu)秀的響應式設計案例。從中可以給我們很多設計思路！

標簽： 響應式網(wǎng)頁設計 網(wǎng)頁設計 頁面重構 

版權申明：本站文章部分自網(wǎng)絡，如有侵權，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權歸原作者所有，如需使用，請與原作者聯(lián)系。