移動(dòng)互聯(lián)網(wǎng)時(shí)代已經(jīng)到來(lái)，微信微博的崛起也同時(shí)給我們帶來(lái)了很多機(jī)遇，自媒體營(yíng)銷，自媒體銷售等諸多方式給我們帶來(lái)了新的機(jī)遇。

下一個(gè)時(shí)代，是web APP的時(shí)代，隨著諸多代碼的升級(jí)，讓網(wǎng)站在移動(dòng)設(shè)備中，越來(lái)越出彩，效果越來(lái)越絢麗。從幾年前的wap文字手機(jī)網(wǎng)時(shí)代，到現(xiàn)在的響應(yīng)式設(shè)計(jì)時(shí)代，我們能夠感受到移動(dòng)互聯(lián)時(shí)代給我們帶來(lái)的精彩。

下面，我們就來(lái)淺析一下wordpress響應(yīng)式主題的設(shè)計(jì)思路。

多種高低版本瀏覽器的兼容問(wèn)題

我們知道，IE6、IE7、IE8都是非常老舊的瀏覽器，而市面上大部分的瀏覽器（360、百度、獵豹等）都是以本機(jī)安裝的ie瀏覽器為核心的，所以你的電腦安裝的ie版本越低，所能夠讀取的代碼也就越少，會(huì)造成高級(jí)代碼無(wú)法兼容的情況出現(xiàn)。

這就給我們帶來(lái)了新的問(wèn)題，我們想要響應(yīng)式的網(wǎng)站，使用絢麗的jq動(dòng)畫效果，但是需要兼顧老舊瀏覽器，讓他們的訪問(wèn)不至于亂碼。

兼顧老舊瀏覽器，我們現(xiàn)在的思路是檢測(cè)用戶瀏覽器的版本，從而加載不同的文件來(lái)實(shí)現(xiàn)這一效果。

我們通常使用這樣的方式判斷瀏覽器版本：

if(preg_match('/MSIE\s+6/',$_SERVER['HTTP_USER_AGENT'])){

上面的代碼就能夠判斷用戶是否在使用ie6在瀏覽，使用這個(gè)判斷，加載針對(duì)于ie6的文件即可實(shí)現(xiàn)兼容。

也可以使用非常精確的php類來(lái)判斷瀏覽器版本和設(shè)備類型，這里推薦Mobile_Detect。

Mobile_Detect是一個(gè)輕量級(jí)的開(kāi)源移動(dòng)設(shè)備（手機(jī)）檢測(cè)的 PHP Class，它使用 User-Agent 中的字符串，并結(jié)合 HTTP Header，來(lái)檢測(cè)移動(dòng)設(shè)備環(huán)境。這個(gè)設(shè)備檢測(cè)的 PHP 類庫(kù)最強(qiáng)大的地方是，它有一個(gè)非常完整的庫(kù)，可以檢測(cè)出所用的設(shè)備類型（包括操作類型，以及手機(jī)品牌等都能檢測(cè)）和瀏覽器的詳細(xì)信息。這種方式非常精確的判斷，也是我們所能夠依靠的。

具體的思路如下：

判斷如果使用ie6、7、8版本時(shí) ，加載普通效果的代碼，讓網(wǎng)站不運(yùn)行高級(jí)代碼，這樣雖然一些絢麗的效果不能顯示出來(lái)，但是并不會(huì)造成亂碼、錯(cuò)位等現(xiàn)象，讓使用低等級(jí)的瀏覽器用戶能夠正常訪問(wèn)網(wǎng)站。

如果使用的的IE9以上的瀏覽器，或者非IE內(nèi)核瀏覽器，則使用高級(jí)代碼，響應(yīng)式設(shè)計(jì)，由于手機(jī)瀏覽器能夠兼容高級(jí)代碼，所以不需要擔(dān)心兼容的問(wèn)題，這樣我們就能兼顧到高低瀏覽器的使用了。

響應(yīng)式設(shè)計(jì)

相應(yīng)式設(shè)計(jì)說(shuō)的比較多，但是也不是隨便就能夠坐到的，在設(shè)計(jì)稿制作層面，你需要把握好各個(gè)模塊的寬度，精確到1像素，判斷好比例，做出各個(gè)版本的設(shè)計(jì)稿，這樣才能在制作中順利的進(jìn)行。

一般來(lái)說(shuō)，響應(yīng)式設(shè)計(jì)所依靠的是百分比寬度（width：100%），自適應(yīng)的高度（height:auto），以及最大寬度（max-width），最小寬度（min-width），將整體的寬度布局做好，并且使用浮動(dòng)（float:left;），讓寬度不能顯示兩個(gè)模塊時(shí)，自動(dòng)將模塊換行。

此外，比較核心的是css3中的媒體查詢功能：

@media screen and (max-width: 980px)

這段代碼所代表的是，當(dāng)屏幕寬度小于980像素時(shí)加載的css

另外，我們?nèi)绻枰鲆粋€(gè)非常絢麗的手機(jī)顯示效果，也需要在移動(dòng)設(shè)備中訪問(wèn)時(shí)，加載不同的js庫(kù)，如：我們?cè)趐c訪問(wèn)時(shí)可以使用jquery 1.7 、1.8、 1.9? ，讓ie低版本高版本運(yùn)行流暢，而使用移動(dòng)設(shè)備時(shí)，加載Jquery Mobile，讓移動(dòng)設(shè)備也能夠流暢的運(yùn)行各種效果。

做好一個(gè)響應(yīng)式設(shè)計(jì)可以說(shuō)是不容易的，當(dāng)前用戶所使用的瀏覽器版本高低不齊，所以需要兼顧的方面也非常之多，移動(dòng)設(shè)備的尺寸也隨著科技的發(fā)展，越來(lái)越多，我們所要測(cè)試的設(shè)備也越來(lái)越多，說(shuō)到底，也需要在最開(kāi)始的布局設(shè)計(jì)時(shí)把握好各種尺寸的變換問(wèn)題，嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)思路，會(huì)讓你的響應(yīng)式設(shè)計(jì)制作非常順利。

下面我們提供大部分的設(shè)備尺寸，提供給你參考：