移動響應(yīng)式Web設(shè)計與構(gòu)建

文/康玉忠 曾文英 陳杰

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

所謂的“響應(yīng)式Web設(shè)計”，它是指在網(wǎng)站建設(shè)過程中，利用響應(yīng)式Web設(shè)計技術(shù)構(gòu)建設(shè)計網(wǎng)站，使網(wǎng)頁內(nèi)容在PC、平板電腦以及智能手機(jī)上能，根據(jù)用戶交互行為以及設(shè)備系統(tǒng)、屏幕尺寸作相應(yīng)的響應(yīng)，并能正常的顯示內(nèi)容。

響應(yīng)式Web設(shè)計首先應(yīng)該遵循移動優(yōu)先原則，交互設(shè)計應(yīng)以移動端為主，由移動端擴(kuò)展PC端，頁面需要兼容不同終端。響應(yīng)式Web設(shè)計我們應(yīng)該考慮先針對移動終端小屏幕進(jìn)行設(shè)計，然后針對PC機(jī)大屏幕進(jìn)行設(shè)計。通過流式布局（Fluid Grids）創(chuàng)建流動的彈性布局界面，自適應(yīng)圖片（Scalable Images）調(diào)整頁面的圖片顯示，利用媒介查詢（Media Queries）技術(shù)選擇樣式，調(diào)整布局元素的范圍，實現(xiàn)網(wǎng)頁對不同終端設(shè)備的最優(yōu)適配解決方案。

2 響應(yīng)式模塊布局設(shè)計

按照“移動優(yōu)先”的設(shè)計思想，首先利用DIV+CSS技術(shù)實現(xiàn)響應(yīng)式整體布局，在設(shè)計網(wǎng)頁過程中添加詳細(xì)顯示內(nèi)容，最后階段對頁面進(jìn)行裝飾美化。在設(shè)計網(wǎng)頁布局的過程中，先按規(guī)范設(shè)計2-3個固定寬度做為響應(yīng)的模板，以寬度最窄的作為移動手機(jī)終端框架，再依次設(shè)計出中等、最寬的頁面。網(wǎng)頁根據(jù)屏幕大小，模塊設(shè)計布局，采用單列布局、雙列布局、三列布局顯示，使用戶在瀏覽時有較好的體驗。如圖1所示。

3 響應(yīng)式網(wǎng)頁開發(fā)技術(shù)

3.1 流式布局

頁面采用彈性設(shè)計來自動響應(yīng)屏幕的變化和調(diào)整頁面布局。采用CSS設(shè)置容器的浮動屬性，來適應(yīng)流式定位，自動適應(yīng)寬度的變化。如當(dāng)屏幕寬度不夠，一行放不下多個區(qū)塊時，就會浮動出現(xiàn)在下層，形成雙欄布局。

圖1

3.2 媒體查詢

媒體查詢是響應(yīng)式設(shè)計的關(guān)鍵技術(shù)，利用media自動探測屏幕寬度，媒體查詢的實現(xiàn)主要通過link標(biāo)簽和@media規(guī)則，根據(jù)查詢條件加載相應(yīng)的CSS樣式局定位文件，從而達(dá)到為不同的終端設(shè)備自動調(diào)整頁面的目的。如代碼：

對于瀏覽器不支持CSS媒體查詢功能，如IE8及以下版本，可通過加載外部加載html5shiv和respond.min文件，支持CSS媒體查詢。如代碼：

3.3 彈性圖片

基于“響應(yīng)式圖片”的思想，移動終端在瀏覽大圖片時會消耗大量流量而影響網(wǎng)頁面加載速度，響應(yīng)式設(shè)計網(wǎng)頁時可以考慮使用兩種圖片，通過javascript腳本來檢測屏幕的分辨率，引用不同的CSS樣式，調(diào)用不同分辨率的圖片，如在PC上使用分辨率較大的圖片，在移動終端上調(diào)用分辨率較少的圖片。響應(yīng)式網(wǎng)頁還可以設(shè)置相對值，實現(xiàn)圖片的自動縮放。

4 觸屏交互設(shè)計

觸摸屏的交互方式有相應(yīng)設(shè)計規(guī)范，觸屏設(shè)備對點擊范圍要求不同，如導(dǎo)航列表設(shè)計放在頁面右側(cè)或右下角，因為多數(shù)人習(xí)慣用左手把持設(shè)備，右手點擊交互操作；手機(jī)操作多以滑動為主，滑動式操作讓用戶體驗過程更加流暢。觸摸屏的交互設(shè)計采用程序優(yōu)化，利用虛擬鍵盤可以改變輸入法布局，還能提供常用的命令，起到智能、輔助輸入作用，增強(qiáng)用戶體驗效果。

5 動態(tài)元素設(shè)計

動態(tài)的元素比起靜態(tài)的文字訊息更能吸引用戶，移動終端視窗較小，用戶不必從上到下滾動頁面尋找信息。以Cinemagraphs取代GIF動態(tài)圖加入，讓觀眾可以更深入的參與網(wǎng)站，Cinemagraphs是靜態(tài)照片中神奇的細(xì)微運動技術(shù)，是動態(tài)攝影和靜態(tài)圖片的結(jié)合，與GIF動畫的不同在于它只包含一個動態(tài)元素。隨著VR技術(shù)普遍，越來越多企業(yè)將虛擬現(xiàn)實技術(shù)、視頻融入網(wǎng)站，豐富了信息，給觀眾更獨特的體驗。