首先蒙特網(wǎng)站設(shè)計(jì)公司同大家看下什么是響應(yīng)式網(wǎng)頁設(shè)計(jì)。它為用戶從他們的電腦切換到iPad、iPhone、黑莓、HTC、平板電腦等等，該網(wǎng)站能自動(dòng)切換適應(yīng)的分辨率，圖像大小和腳本。換句話說，該網(wǎng)站能自動(dòng)響應(yīng)用戶的喜好。通俗點(diǎn)說法就是有求必應(yīng)的網(wǎng)頁!

　　它不僅僅是一種趨勢，而是一個(gè)新的設(shè)計(jì)解決方案!它有助于解決不同的分辨率和設(shè)備(臺(tái)式電腦，筆記本電腦，平板，手機(jī))相關(guān)的設(shè)計(jì)問題。

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

　　下面我們來做一個(gè)簡單的響應(yīng)式網(wǎng)頁。

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

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

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

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

　　首先，我們來看下html結(jié)構(gòu)

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

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

　　1

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

　　1

　　2

　　3

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

　　1

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

　　1

　　2

　　3

　　4

　　5@media screen and (max-width: 480px) {

　　這里就是重新設(shè)定一些css的屬性

　　}

　　當(dāng)瀏覽器窗口小于980px的時(shí)候

　　1

　　2

　　3#wraper { width: 95%;}重新設(shè)定容器寬度為95%

　　#content { width: 60%; padding: 3% 4%;}重新設(shè)定內(nèi)容寬度為60%

　　#sidebar { width: 30%;}重新設(shè)定側(cè)邊欄寬度為30%

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

　　當(dāng)瀏覽器窗口小于650px的時(shí)候

　　1

　　2#content { width: auto;float: none;margin: 20px 0;}

　　#sidebar { display:none; width: 100%; margin: 0; float: none; }

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

　　當(dāng)瀏覽器窗口小于480px的時(shí)候，一般這個(gè)就是iPhone的橫向?qū)挾取?/font>