李倩

摘要：本文主要研究面向不同設(shè)備的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，介紹了幾種不同的移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)思想，并對(duì)面向不同設(shè)備的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)方法進(jìn)行了研究。

關(guān)鍵詞：面向不同設(shè)備；響應(yīng)式網(wǎng)頁(yè)；設(shè)計(jì)

中圖分類(lèi)號(hào)：G642.0 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1674-9324（2017）12-0082-02

很多網(wǎng)站為了獲得更高的覆蓋率，開(kāi)始制作面向不同設(shè)備的網(wǎng)頁(yè)，為了獲得多個(gè)設(shè)備不同平臺(tái)上相同的顯示效果，需要為多個(gè)設(shè)備制作多個(gè)不同版本網(wǎng)頁(yè)，增加了維護(hù)成本和架構(gòu)設(shè)計(jì)的難度，而響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)理念遵循依據(jù)頁(yè)面大小提供相匹配視覺(jué)效果的基本原則，在為不同設(shè)備提供理想顯示效果的同時(shí)，節(jié)省了開(kāi)發(fā)和維護(hù)成本，降低了開(kāi)發(fā)難度，有較高的應(yīng)用潛力。

一、跨設(shè)備設(shè)計(jì)

不是所有的網(wǎng)站都需要從零開(kāi)始響應(yīng)化，也并非所有網(wǎng)站都有必要做到全站響應(yīng)化，實(shí)際工作中我們更經(jīng)常遇到已經(jīng)有PC端的情況，在充分認(rèn)識(shí)到移動(dòng)流量的重要性之后愿意提供響應(yīng)化的移動(dòng)瀏覽體驗(yàn)，確保用戶(hù)能夠通過(guò)移動(dòng)終端訪(fǎng)問(wèn)網(wǎng)站，因此為了提高響應(yīng)式頁(yè)面設(shè)計(jì)的實(shí)效性，節(jié)省開(kāi)發(fā)成本，需要科學(xué)地選擇開(kāi)發(fā)策略。

1.獨(dú)立移動(dòng)站。獨(dú)立移動(dòng)站的設(shè)計(jì)方式適用于沒(méi)有嚴(yán)格同步要求或者強(qiáng)烈移動(dòng)終端使用意圖，但是想要提供類(lèi)似APP體驗(yàn)的應(yīng)用場(chǎng)景。國(guó)內(nèi)的一些大規(guī)模網(wǎng)站如淘寶、京東、當(dāng)當(dāng)?shù)扔兄謴?fù)雜的系統(tǒng)結(jié)構(gòu)，全站響應(yīng)的難度非常大，因此更希望為移動(dòng)端提供和APP統(tǒng)一的交互方式，傾向于選擇獨(dú)立建站，稱(chēng)作M站、WAP站或者H5版本，單獨(dú)運(yùn)維。這種建站方法保留了原有PC站，重新建設(shè)移動(dòng)站，確保了分辨率、移動(dòng)設(shè)備以及使用產(chǎn)品用戶(hù)可控，成本也更加易于控制，但是網(wǎng)站內(nèi)容更新、整體維護(hù)成本偏高，分開(kāi)維護(hù)的方式容易導(dǎo)致壞鏈、錯(cuò)鏈。

2.自上而下響應(yīng)。網(wǎng)站原有的設(shè)計(jì)標(biāo)準(zhǔn)已經(jīng)比較先進(jìn)時(shí)，就可以充分利用現(xiàn)有代碼適應(yīng)更多分辨率。這種設(shè)計(jì)策略對(duì)原網(wǎng)站編碼基礎(chǔ)有很高要求，調(diào)整分別率之后還要重新測(cè)試原分辨率頁(yè)面。這種設(shè)計(jì)方法成本和原網(wǎng)頁(yè)編碼基礎(chǔ)有關(guān)，實(shí)際工作之前首先要評(píng)估原網(wǎng)頁(yè)編碼質(zhì)量。

3.移動(dòng)優(yōu)先。移動(dòng)優(yōu)先建站策略使用了全新的、漸進(jìn)增強(qiáng)式的代碼基礎(chǔ)，能夠充分發(fā)揮響應(yīng)式網(wǎng)頁(yè)的所有優(yōu)勢(shì)，獲得無(wú)縫對(duì)接一致性用戶(hù)體驗(yàn)，全屏幕適應(yīng)，可拓展性強(qiáng)，運(yùn)維成本低，SEO統(tǒng)一。但是這樣的設(shè)計(jì)策略也面臨著很多風(fēng)險(xiǎn)，計(jì)劃、開(kāi)發(fā)、測(cè)試工作量遠(yuǎn)遠(yuǎn)大于普通PC站，需要權(quán)衡優(yōu)勢(shì)和風(fēng)險(xiǎn)。

4.插件服務(wù)。一些插件以及服務(wù)提供商專(zhuān)注于提供跨平臺(tái)可用性，找尋折中方法，價(jià)格也比較合理，這些方案在靈活性以及不同平臺(tái)的表現(xiàn)方面可能不如全響應(yīng)式，但是是一種優(yōu)秀的過(guò)度方案。

5.響應(yīng)式網(wǎng)站布局。是當(dāng)前最受歡迎的多設(shè)備自適應(yīng)開(kāi)源響應(yīng)式前端框架，最早出現(xiàn)在Twitter內(nèi)部用于保持內(nèi)部解決響應(yīng)與網(wǎng)頁(yè)一致性的工具Twitter Blueprint，之后轉(zhuǎn)變理念，從移動(dòng)設(shè)備友好轉(zhuǎn)變?yōu)橐苿?dòng)設(shè)備優(yōu)先，并將其融入了框架內(nèi)核。流式格柵系統(tǒng)響應(yīng)式網(wǎng)頁(yè)使用了行和列的組合來(lái)進(jìn)行頁(yè)面布局，在布局塊中填充內(nèi)容，但是設(shè)計(jì)師不再使用像素進(jìn)行尺寸標(biāo)記，而是使用比例和模塊的響應(yīng)式思想，不要求較高個(gè)性化配置的網(wǎng)頁(yè)推薦使用這種設(shè)計(jì)方法。

二、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)（responsive web design，RWD）最早由Ethan Marcotte提出，是一種面向任意設(shè)備網(wǎng)頁(yè)，甚至能夠?qū)ξ磥?lái)設(shè)備網(wǎng)頁(yè)完美布局的網(wǎng)頁(yè)顯示機(jī)制。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)不是根據(jù)視窗大小調(diào)整網(wǎng)頁(yè)布局，也不是針對(duì)不聽(tīng)設(shè)備設(shè)計(jì)開(kāi)發(fā)不同的網(wǎng)頁(yè)，而是對(duì)當(dāng)前網(wǎng)頁(yè)設(shè)計(jì)方法理念的全面顛覆，突破了面向桌面電腦固定寬度設(shè)計(jì)，再將其縮小重排面向小屏幕的設(shè)計(jì)思想。響應(yīng)式網(wǎng)頁(yè)首先設(shè)計(jì)小屏幕網(wǎng)頁(yè)，之后逐漸添加內(nèi)容，增強(qiáng)大屏幕的視覺(jué)效果，技術(shù)措施主要有阻止移動(dòng)瀏覽器自由調(diào)整頁(yè)面、媒體查詢(xún)、流式布局等。

1.阻止移動(dòng)瀏覽器自由縮放。智能移動(dòng)終端瀏覽桌面版網(wǎng)頁(yè)，通常會(huì)自行縮放，將其調(diào)整到合適寬度，將整個(gè)頁(yè)面完整顯示在窗口，這樣會(huì)導(dǎo)致字體太小，不方便瀏覽，這種情況下可以利用meta標(biāo)簽的viewpoint屬性，預(yù)先設(shè)定使用原始比例加載和顯示整個(gè)網(wǎng)頁(yè)，并將該meta標(biāo)簽封裝在標(biāo)簽里。Viewpoint是網(wǎng)頁(yè)默認(rèn)寬度高度，在該標(biāo)簽中可以將網(wǎng)頁(yè)寬度長(zhǎng)度默認(rèn)為設(shè)備的寬度長(zhǎng)度，支持該特性瀏覽器都將根據(jù)該默認(rèn)長(zhǎng)寬加載并顯示頁(yè)面。幾乎所有主流瀏覽器都支持該設(shè)置，IE9同樣具有該功能，版本更低的IE瀏覽器可以使用css3添加IE Media Query支持，設(shè)置好標(biāo)簽后，任何瀏覽器都不會(huì)自行縮放頁(yè)面，方便對(duì)不同視口顯示效果進(jìn)行修正。

2.媒體查詢(xún)。css3媒體查詢(xún)模塊是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的關(guān)鍵，該技術(shù)能夠結(jié)合設(shè)備顯示器特性，設(shè)定css樣式，利用幾行代碼就能夠結(jié)合視口長(zhǎng)寬、橫豎特性對(duì)網(wǎng)頁(yè)內(nèi)容方式進(jìn)行實(shí)時(shí)調(diào)整。（1）樣式文件的選擇性加載。媒體查詢(xún)功能能夠針對(duì)不同設(shè)備的功能特性設(shè)置對(duì)應(yīng)的樣式，不僅僅針對(duì)設(shè)備類(lèi)型。媒體查詢(xún)表達(dá)式首先詢(xún)問(wèn)媒體類(lèi)型，確定是否為顯示屏，之后詢(xún)問(wèn)媒體特性，包括橫縱向和長(zhǎng)寬等，縱向放置屏幕會(huì)加載portrait-screen.css樣式表，其他設(shè)則忽視該樣式表，通過(guò)媒體查詢(xún)，實(shí)現(xiàn)了樣式文件的選擇性添加。（2）css樣式表媒體查詢(xún)。同一文件樣式針對(duì)不同設(shè)備需要使用不同樣式，可以使用@media選擇指令選擇樣式文件，在樣式表中插入相應(yīng)代碼，如果屏幕長(zhǎng)寬、橫豎等特性觸發(fā)了代碼執(zhí)行條件，就會(huì)執(zhí)行代碼，選擇性加載樣式。（3）css@import。css@import指令用于在樣式表中根據(jù)條件引入其他樣式表，但是該指令會(huì)增加外HTTP請(qǐng)求，會(huì)對(duì)加載速度造成影響，需慎重使用。

3.老版本瀏覽器兼容性設(shè)計(jì)。一些瀏覽器不支持media query，css3媒體查詢(xún)功能可以使用javaScript腳本實(shí)現(xiàn)，核心功能是判斷視口長(zhǎng)寬、設(shè)備類(lèi)型檢測(cè)。首先引入JavaScript庫(kù)，下載最新版jQuery最新版本，再利用jQuery獲取視口長(zhǎng)寬，和css3媒體查詢(xún)的“max-width”、“min-width”屬性基本相同。使用JavaScript腳本還能夠獲取瀏覽器的設(shè)備類(lèi)型，判斷是否為IOS、Android或者其他系統(tǒng)設(shè)備，確定設(shè)備類(lèi)型之后再選擇加載合適的樣式表文件。