面向不同設(shè)備的響應(yīng)式網(wǎng)頁設(shè)計探析

李倩

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

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

中圖分類號：G642.0 文獻標志碼：A 文章編號：1674-9324（2017）12-0082-02

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

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

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

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

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

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

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

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

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

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

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

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

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