足移動(dòng)終端時(shí)代各種移動(dòng)設(shè)備持有者瀏覽網(wǎng)頁的需求，能有效提升網(wǎng)站訪問者的用戶體驗(yàn)。
在提出響應(yīng)式網(wǎng)頁設(shè)計(jì)這一概念之前，網(wǎng)站建設(shè)者常見的做法無非是準(zhǔn)備兩套網(wǎng)站程序，其中一套是供web端用戶訪問，另一套是供wap端用戶訪問的。這樣的解決方法比較復(fù)雜，兩套程序維護(hù)起來也非常的不容易。盡管現(xiàn)在很多CMS建站程序都能有效保證web端與wap端網(wǎng)站的數(shù)據(jù)同步，但這始終不是解決問題的最好方法。隨著移動(dòng)終端時(shí)代的逐步發(fā)展，各種不同尺寸的移動(dòng)設(shè)備誕生，原先的兩套程序顯然已經(jīng)無法滿足多種移動(dòng)設(shè)備，響應(yīng)式網(wǎng)頁設(shè)計(jì)正是為了解決這一問題而誕生的。
代碼君網(wǎng)站近期處于響應(yīng)式布局設(shè)計(jì)測試階段，目前本網(wǎng)站主要模塊部分基本已經(jīng)完成了響應(yīng)式布局設(shè)計(jì)，朋友們可縮放瀏覽器窗口體驗(yàn)不同尺寸的設(shè)備瀏覽本站可能看到的效果。
其實(shí)在此之前袁程旭本人還是比較反感使用響應(yīng)式布局設(shè)計(jì)的，因?yàn)檎鹃L們都知道，咱這些中小站長主要收入都來源于網(wǎng)站投放的第三方廣告。響應(yīng)式布局設(shè)計(jì)雖然美觀，但會(huì)影響那些本身就固定了尺寸的廣告位投放。本來袁程旭打算采取最老式的做法，給代碼君網(wǎng)站新增一個(gè)wap端版本，但無奈的是測試結(jié)果總不盡如人意。最終本站還是采取了響應(yīng)式布局設(shè)計(jì)，且看我是如何解決問題的吧。
響應(yīng)式網(wǎng)頁設(shè)計(jì)如何解決固定尺寸的廣告位煩惱？
其實(shí)解決辦法很簡單，這是本次代碼君網(wǎng)站響應(yīng)式設(shè)計(jì)測試過程中袁程旭總結(jié)出來的心得。首先你該怎么編碼就怎么編碼，把最原始的一套網(wǎng)站程序設(shè)計(jì)出來。比如本站原先沒采用響應(yīng)式布局時(shí)是寬度為1100像素的固定尺寸網(wǎng)頁，那只要瀏覽者所持有的設(shè)備寬度大于1100px，本站所有的一切模塊均能正常展現(xiàn)。這么想的話問題就很簡單了，我們只需對(duì)小于1100px的設(shè)備進(jìn)行響應(yīng)式編碼設(shè)計(jì)。
在里加入這條元標(biāo)簽，保證移動(dòng)瀏覽器中頁面將以原始大小顯示且不能縮放：
然后用基于CSS3的媒介查詢(Media Query)特性對(duì)屏幕寬度小于1100px的設(shè)備分類探討，將部分模塊的樣式進(jìn)行重寫，滿足響應(yīng)式網(wǎng)頁布局設(shè)計(jì)要求。一般情況下，網(wǎng)站需要重寫的模塊無非是導(dǎo)航欄和網(wǎng)頁右側(cè)模塊。值得注意的是，重寫的樣式需杜絕使用絕對(duì)寬度布局或者具有絕對(duì)寬度的元素。
聽起來好像還蠻復(fù)雜的，但其實(shí)并沒有那么難。簡單總結(jié)一下，就是當(dāng)瀏覽者所持有的設(shè)備寬度大于網(wǎng)站原先設(shè)定的固定寬度時(shí)，就忽略響應(yīng)式布局代碼；反之，當(dāng)設(shè)備寬度小于網(wǎng)站寬度時(shí)，為了提升用戶體驗(yàn)就必須分情況進(jìn)行響應(yīng)式布局設(shè)計(jì)，對(duì)相應(yīng)模塊的代碼進(jìn)行樣式重寫。
之所以會(huì)這么復(fù)雜是為了網(wǎng)站的廣告位考慮，要是您的網(wǎng)站不屑于投放第三方廣告創(chuàng)收的話，直接忽略本文所說的一切，從一開始編碼時(shí)就采用自適應(yīng)布局設(shè)計(jì)就可以了。當(dāng)然，如果您不確定后期是否會(huì)進(jìn)行固定尺寸的廣告位增添，可在網(wǎng)站編碼時(shí)采用如下方法：
1、外層控制網(wǎng)頁主體寬度的div采取固定像素限定；
2、內(nèi)層模塊對(duì)應(yīng)的div可用原先設(shè)定的尺寸除以外層尺寸后以百分比形式設(shè)定；
這樣，當(dāng)我們后期想要更換網(wǎng)站程序?yàn)轫憫?yīng)式布局時(shí)，直接更改外層div的固定像素為百分比形式即可，對(duì)部分模塊分情況進(jìn)行簡單的樣式重寫便可輕松實(shí)現(xiàn)網(wǎng)頁自適應(yīng)布局啦。
