楊秀生

摘要：近年來，移動互聯(lián)網(wǎng)得到大范圍推廣，響應(yīng)式Web的設(shè)計的關(guān)鍵技術(shù)也得到完善，響應(yīng)式Web的設(shè)計關(guān)鍵技術(shù)是移動互聯(lián)網(wǎng)開發(fā)熱點(diǎn)。主要是因?yàn)轫憫?yīng)式Web設(shè)計整合了媒體查詢（media queries）、彈性視覺媒體和流動布局（fluid grids），使得Web網(wǎng)頁得到合理優(yōu)化、視覺媒體能按照特定布局進(jìn)行動態(tài)布局、流動布局能創(chuàng)建可縮放、可流動的彈性版式，這是Web技術(shù)的進(jìn)步。筆者通過查閱相關(guān)文獻(xiàn)和整理相關(guān)數(shù)據(jù)，展開對響應(yīng)式 Web 設(shè)計概述及關(guān)鍵技術(shù)、響應(yīng)式Web的開發(fā)流程、響應(yīng)式Web的優(yōu)勢等展開分析，得出以下的結(jié)論。

關(guān)鍵詞：響應(yīng)式Web；設(shè)計；關(guān)鍵技術(shù)

中圖分類號：TP311 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2017）05-0051-02

隨著這幾年，移動智能新品的推出，PC 互聯(lián)網(wǎng)加速向移動端遷移和移動終端體驗(yàn)效果迥異，需要Web具有更強(qiáng)的兼容性，能夠在用戶的PC或者是智能客戶端進(jìn)行操作，響應(yīng)式Web的設(shè)計的關(guān)鍵技術(shù)得到了重點(diǎn)開發(fā)，這關(guān)系到一個網(wǎng)頁是否能夠得到大眾的認(rèn)可，為大眾提供良好的客戶體驗(yàn)。

據(jù)有關(guān)數(shù)據(jù)反映，國內(nèi)Pc端網(wǎng)站的日均覆蓋人數(shù)基本保持在 2.3 億人次左右，移動端 App 的日均覆蓋人數(shù)已接近 2 億，并呈現(xiàn)持續(xù)上漲趨勢，這些數(shù)據(jù)表明，移動互聯(lián)網(wǎng)智能化已經(jīng)來到，人們的工作和生活交流工具從PC客戶端轉(zhuǎn)移到移動智能端，傳統(tǒng)的網(wǎng)頁勢必遭到淘汰。

1 響應(yīng)式 Web 設(shè)計概述及關(guān)鍵技術(shù)

1.1 響應(yīng)式 Web 設(shè)計概述

響應(yīng)式Web技術(shù)在互聯(lián)網(wǎng)開發(fā)的時候，因?yàn)槠溥m用范圍較少，沒得到重視，但隨著近幾年來，智能產(chǎn)品開發(fā)，要求Web滿足PC客戶端和移動客戶度，相關(guān)的Web設(shè)計者才開始重視響應(yīng)式Web 設(shè)計。

2010 年美國著名網(wǎng)站設(shè)計師伊?！ゑR科特（Ethan Marcotte）在“A List Apart”發(fā)表題為“Responsive Web Design”的文章，提出了“響應(yīng)式 Web 設(shè)計”（Responsive Web Design，簡稱RWD，也稱“自適應(yīng)網(wǎng)頁設(shè)計”）的概念，指的是能智能識別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計。響應(yīng)式Web的設(shè)計注重的是實(shí)現(xiàn)一個網(wǎng)站能兼容多個終端，通過媒體查詢、彈性視覺媒體、流動布局的結(jié)合，實(shí)現(xiàn)兼容性網(wǎng)站創(chuàng)建，一個網(wǎng)站能夠滿足不同客戶端用戶需要。響應(yīng)式Web設(shè)計能使客戶端適應(yīng)用戶設(shè)備環(huán)境，智能化地適應(yīng)大眾的需要。

1.2 響應(yīng)式 Web 設(shè)計響應(yīng)式 Web 設(shè)計

一個好的網(wǎng)站設(shè)計，主要能夠根據(jù)用戶端進(jìn)行前臺頁面調(diào)整，利于形成良好的客戶體驗(yàn)。響應(yīng)式Web設(shè)計由媒體查詢、彈性視覺媒體和流動布局三種核心技術(shù)構(gòu)成。

1）媒體查詢

媒體查詢是基于CSS33的一種新特性，主要應(yīng)用于某種每天特征下的顯示規(guī)則。RWD設(shè)計布局時，通過優(yōu)先建立移動客戶體驗(yàn)，利用媒體查詢調(diào)整大屏幕，用移動端上設(shè)計原則能保證Web為不同類型的客戶提供最佳的客戶體驗(yàn)。目前，媒體查詢支持 IE9、Firefox3.5、Safari3 以及它們的更高版本，同時支持大部分智能手機(jī)和其他基于屏幕的設(shè)備。這是科技發(fā)展的重大突破，得到很多的大眾的支持。

智能設(shè)備的流行，讓W(xué)eb設(shè)計者可以根據(jù)各自不同類型的設(shè)備屬性，進(jìn)行貼心設(shè)計，支持不同分辨率、屏幕尺寸、系統(tǒng)平臺等設(shè)備環(huán)境。完美的完成響應(yīng)式Web設(shè)計，實(shí)現(xiàn)PC電腦客戶端、手機(jī)客戶端、平板等設(shè)備查看網(wǎng)頁無障礙。國內(nèi)的Web設(shè)計通常是利用link標(biāo)簽和@media 規(guī)則來實(shí)現(xiàn)。

2）彈性視覺媒體

網(wǎng)站的頁面設(shè)置，隨著電腦技術(shù)的進(jìn)步，能夠根據(jù)用戶的習(xí)慣性進(jìn)行操作，固定布局的頁面寬度已經(jīng)是過去式網(wǎng)頁設(shè)置，現(xiàn)在智能機(jī)瀏覽頁面，可以通過手指滑動進(jìn)行屏幕調(diào)整，根據(jù)客戶的需要進(jìn)行智能化調(diào)整，不需要客戶自己調(diào)整Web界面的縮放問題，是頁面具有可變性。傳統(tǒng)的網(wǎng)頁主要采用的是“圖片+文字”的形式構(gòu)成網(wǎng)頁，而響應(yīng)式Web的設(shè)計可以插入gif圖片、jpg圖片等多種形式。

3）流動布局

傳統(tǒng)的網(wǎng)頁界面隨著科技的進(jìn)步，人們淘汰了，目前響應(yīng)式Web中主要是通過CSS 技巧，使圖像和媒體比例限制在其父元素范圍之內(nèi)，相應(yīng)于布局的其他部分按比例縮放，以適應(yīng)其設(shè)備的大小?，F(xiàn)在很多大的門戶網(wǎng)站，實(shí)現(xiàn)手機(jī)客戶端與PC客戶端的換轉(zhuǎn)，通過彈性圖像和媒體，讓設(shè)備完成分類。

2 響應(yīng)式Web的開發(fā)流程

響應(yīng)式 Web 設(shè)計中的斷點(diǎn)都依賴于 CSS3 的Media Queries 來決斷，斷點(diǎn)就是設(shè)備寬度的臨界點(diǎn) ， 也 就 是 Media Queries 中 的 min-width 和max-width 的值。目前國內(nèi)的網(wǎng)頁設(shè)計，主要偏向智能手機(jī)客戶端，但智能設(shè)備、PC用戶客戶端也不能缺少，都需要開發(fā)者考慮在內(nèi)。網(wǎng)頁的制作通常有五個流程：計劃分析、總體架構(gòu)設(shè)計、具體開發(fā)、精確測試、完善修改。網(wǎng)頁是否能夠得到客戶的認(rèn)可，需要后期的不斷維護(hù)，以此達(dá)到良好的客戶體驗(yàn)。

國內(nèi)的響應(yīng)式Web設(shè)計，主要是根據(jù)用戶行為及設(shè)備環(huán)境，進(jìn)行頁面設(shè)置，采取智能化的感應(yīng)處理，根據(jù)用戶系統(tǒng)、屏幕尺寸、屏幕定向等實(shí)現(xiàn)頁面自動切換分辨率、圖片尺司及相關(guān)腳本功能等。不需要人工進(jìn)行設(shè)置，是一種全興的設(shè)計理念。

1）計劃分析

響應(yīng)式Web設(shè)計首先要確定網(wǎng)站適合的系統(tǒng)平臺，要充分考慮到客戶設(shè)備環(huán)境，比如設(shè)備類型、屏幕尺寸等，實(shí)現(xiàn)人工智能，避免客戶進(jìn)行自我調(diào)整，造成設(shè)計網(wǎng)頁設(shè)置的網(wǎng)頁效果不能夠完全展現(xiàn)。

2）總體架構(gòu)設(shè)計

Web設(shè)計師根據(jù)網(wǎng)站用途以及開發(fā)需求，對網(wǎng)站進(jìn)行總體架構(gòu)設(shè)計，拿出適合的方案，根據(jù)調(diào)查數(shù)據(jù)，進(jìn)行模擬測試，以便提出及時的發(fā)現(xiàn)設(shè)計漏洞。傳統(tǒng)的網(wǎng)頁里面元素可以繼續(xù)利用，但需要Web技術(shù)人員進(jìn)行更新，搭建網(wǎng)站交換器，實(shí)現(xiàn)網(wǎng)頁運(yùn)轉(zhuǎn)協(xié)調(diào)。

3）具體開發(fā)

將網(wǎng)站所需圖片導(dǎo)入到相應(yīng)的設(shè)備，進(jìn)行設(shè)備測試，看不同的設(shè)備能否適應(yīng)系統(tǒng)的設(shè)備環(huán)境。前端構(gòu)建，使用響應(yīng)式前端開發(fā)框架，這樣有利于實(shí)現(xiàn)開發(fā)過程的高效簡化，同時確保開發(fā)的網(wǎng)站具有跨平臺、兼容性、響應(yīng)式等特點(diǎn)另外前端開發(fā)人員需要和設(shè)計師多溝通，確保響應(yīng)式設(shè)計的頁面布局、內(nèi)容尺寸符合大眾審美需求。

4）精確測試

網(wǎng)頁設(shè)計需要根據(jù)用戶需要，Web設(shè)計者根據(jù)客戶需要及時進(jìn)行頁面設(shè)計調(diào)整，讓頁面能夠根據(jù)用戶設(shè)備環(huán)境進(jìn)行調(diào)整，定期的采取數(shù)據(jù)收集模式，對收集到的數(shù)據(jù)進(jìn)行分析討論，按照客戶的使用習(xí)慣進(jìn)行頁面設(shè)置，讓眼界能夠?qū)崿F(xiàn)靈活性。

5）完善修改

根據(jù)網(wǎng)站瀏覽數(shù)據(jù)進(jìn)行數(shù)據(jù)分析，定期根據(jù)客戶需要進(jìn)行更新，適當(dāng)?shù)募尤胄碌闹黝}元素，響應(yīng)式Web的設(shè)計者，需要綜合客戶反映的數(shù)據(jù)，進(jìn)行網(wǎng)頁調(diào)整，能保證Web的與時俱進(jìn)性，實(shí)現(xiàn)資源模式的進(jìn)步。

3 響應(yīng)式Web的優(yōu)勢

目前，伴隨著HTML 5、CSS3、Java Script 等 Web技術(shù)開發(fā)，響應(yīng)式網(wǎng)頁設(shè)計以其設(shè)計實(shí)用性和良好客戶體驗(yàn)，得到大眾認(rèn)可，響應(yīng)式Web的設(shè)計已經(jīng)大面積的取代傳統(tǒng)的網(wǎng)頁設(shè)計，是門戶網(wǎng)站的首選條件，以下是筆者總結(jié)的響應(yīng)式Web的設(shè)計具有的優(yōu)勢。

1）響應(yīng)式Web的設(shè)計讓網(wǎng)頁操作簡便

響應(yīng)式Web的設(shè)計相較于傳統(tǒng)網(wǎng)頁來說，能夠?yàn)榭蛻籼峁┝己玫目蛻趔w驗(yàn)，主要是因?yàn)樗軌蜃詣舆m應(yīng)客戶的設(shè)備，且網(wǎng)絡(luò)服務(wù)終端更加的人性化體驗(yàn)，得到大眾認(rèn)可。相較于傳統(tǒng)的網(wǎng)頁，響應(yīng)式Web能夠根據(jù)用戶需要，開發(fā)較小的適應(yīng)設(shè)備，方便客戶進(jìn)行操作。

2）利于網(wǎng)站推廣

響應(yīng)式Web的設(shè)計利于網(wǎng)站的推廣，能通過單一的URL地址收集所有的社交分享鏈接，利于創(chuàng)建更為開闊的網(wǎng)頁服務(wù)平臺。且網(wǎng)頁的制作精良，能夠收到當(dāng)代潮流人士的推崇，人們的交流設(shè)備也傾向于支持響應(yīng)式Web設(shè)計類型網(wǎng)站。

3）減少資金投入

響應(yīng)式Web設(shè)計的優(yōu)勢在于不需重定向，節(jié)約開發(fā)網(wǎng)站成本，實(shí)現(xiàn)網(wǎng)站的獨(dú)立經(jīng)營，定期的網(wǎng)站維護(hù)會減少，不需要投入更多的人工成本，減少資金投入，且不需解決重定向及定向用戶。很多的網(wǎng)站的前期搭建需要投入大量的資金，需要一個循環(huán)的資金產(chǎn)業(yè)鏈，響應(yīng)式Web的設(shè)計，不需要重定向和網(wǎng)頁代理，是直接面對客戶，減少了中間環(huán)節(jié)的資金循環(huán)。

參考文獻(xiàn)：

[1] 崔松健. 響應(yīng)式Web設(shè)計[J]. 信息與電腦：理論版，2013（10）：25-26.

[2] 郭嵐. 基于響應(yīng)模型的Web界面生成技術(shù)的研究與實(shí)現(xiàn)[D].西北大學(xué)，2015.

[3] 自動化技術(shù)、計算機(jī)技術(shù)[J]. 中國無線電電子學(xué)文摘，2007（1）：165-240.

[4] 趙建保. 響應(yīng)式Web設(shè)計關(guān)鍵技術(shù)及設(shè)計流程[J].電腦知識與技術(shù)，2014（5）：1066-1068.

[5] 陳曦. 面向多設(shè)備響應(yīng)式設(shè)計的機(jī)制研究[D].北京郵電大學(xué)，2015.