響應(yīng)式Web關(guān)鍵技術(shù)研究摘"要：針對(duì)網(wǎng)頁不能自動(dòng)識(shí)別設(shè)備分辨率，導(dǎo)致頁面布局混亂、加載速度緩慢、人機(jī)交互性差等問題，提出響應(yīng)式Web“一源多屏”的設(shè)計(jì)方案。通過融合Viewport屬性、流動(dòng)布局、媒體查詢和彈性視覺媒體關(guān)鍵技術(shù)，使網(wǎng)頁在不同設(shè)備下頁面布局更合理。經(jīng)WebPagetest測(cè)試表明，響應(yīng)式Web與非響應(yīng)式Web相比，頁面加載速度明顯提高，響應(yīng)時(shí)間大幅縮短，進(jìn)一步提升了用戶體驗(yàn)感。關(guān)鍵字：響應(yīng)式Web設(shè)計(jì)""Viewport屬性""流動(dòng)布局""媒體查詢""彈性視覺媒體""HTML5技術(shù)""CSS3Research"on"Key"Technologies"of"Responsive"WebLIU"TingDepartment"of"Science，"Taiyuan"Institute"of"Technology，"Taiyuan，"Shanxi"Province，"030008"ChinaAbstract："In"order"to"resolve"the"problems"of"disordered"page"layout，"slow"loading"and"poor"human-computer"interaction"caused"by"the"inability"of"web"pages"to"automatically"recognize"the"resolution"of"the"device，"a"responsive"Web"design"scheme"of"\"one"source，"multiple"screens\""is"proposed."By"integrating"key"technologies"such"as"Viewport"attributes，"fluid"layout，"media"query"and"flexible"visual"media，the"webpage"layout"can"be"made"more"reasonable"on"different"devices."According"to"WebPagetest，"responsive"web"has"significantly"improved"page"loading"speed"and"significantly"reduced"response"time"compared"to"non"responsive"web，"further"enhancing"user"experience.Key"Words："Responsive"Web"design;"Viewport"attributes;"Fluid"layout;"Media"query;"Flexible"visual"media;"HTML5"technology;"CSS3隨著移動(dòng)互聯(lián)網(wǎng)的崛起，互聯(lián)網(wǎng)用戶使用手機(jī)、平板等終端設(shè)備上網(wǎng)已成為一種趨勢(shì)，然而不同設(shè)備的屏幕尺寸、分辨率甚至屏幕定向方式都有所不同，導(dǎo)致同一網(wǎng)頁在不同設(shè)備上出現(xiàn)頁面布局混亂、用戶體驗(yàn)差等問題。之前的解決方案是為不同設(shè)備設(shè)計(jì)不同版本的網(wǎng)頁，雖然可以保證頁面完美的呈現(xiàn)效果，但是要同時(shí)維護(hù)多個(gè)網(wǎng)站版本，大大增加了維護(hù)成本。于是，響應(yīng)式Web設(shè)計(jì)（Responsive"Web"Design，RWD）應(yīng)運(yùn)而生，即設(shè)計(jì)與開發(fā)網(wǎng)頁時(shí)應(yīng)根據(jù)用戶行為及不同設(shè)備采取相關(guān)的策略進(jìn)行調(diào)整。本文針對(duì)日益涌現(xiàn)的多種終端設(shè)備，融合Viewport屬性、流動(dòng)布局、媒體查詢和彈性視覺媒體關(guān)鍵技術(shù)，實(shí)現(xiàn)響應(yīng)式Web“一源多屏”的現(xiàn)實(shí)需求。當(dāng)用戶瀏覽網(wǎng)頁時(shí)，頁面會(huì)根據(jù)多樣的設(shè)備重新排版，在盡可能短的時(shí)間內(nèi)完成加載。同時(shí)，響應(yīng)式Web也可以依據(jù)用戶手握設(shè)備的方向，主動(dòng)進(jìn)行橫豎屏切換，使網(wǎng)頁呈現(xiàn)最佳的布局。采用響應(yīng)式Web只需對(duì)一個(gè)網(wǎng)站進(jìn)行開發(fā)與維護(hù)，能夠有效減少開發(fā)周期與成本，是目前最受歡迎的Web設(shè)計(jì)方式[1，2]。1""響應(yīng)式Web關(guān)鍵技術(shù)探討1.1""基于Viewport屬性識(shí)別設(shè)備分辨率移動(dòng)設(shè)備的Viewport屬性[3]是用來設(shè)置屏幕上可以顯示網(wǎng)頁區(qū)域的大小。通常，Viewport值大于瀏覽器的可視區(qū)域，因?yàn)橐苿?dòng)設(shè)備的分辨率相較于PC機(jī)的分辨率小，為了能正常顯示為PC瀏覽器開發(fā)的網(wǎng)站，移動(dòng)設(shè)備的瀏覽器把Viewport值設(shè)為980"px或1"024"px（也可能是其他值，由設(shè)備決定）。由于該Viewport值比瀏覽器的可視區(qū)域大，所以瀏覽器會(huì)出現(xiàn)水平滾動(dòng)條，實(shí)例中網(wǎng)頁在Firefox攜帶的“響應(yīng)式設(shè)計(jì)模式”下，模擬iPhone6，自定義分辨率375"px×667"px，網(wǎng)頁效果如圖1所示。通過使用lt;metagt;元標(biāo)簽設(shè)置Viewport屬性，當(dāng)用戶訪問不同網(wǎng)頁時(shí)，可獲取設(shè)備自身寬度，從而確保瀏覽器視口最佳，不需要用戶手動(dòng)移動(dòng)水平滾動(dòng)條瀏覽網(wǎng)頁，提高了用戶體驗(yàn)，具體代碼如下：lt;meta""name="“viewport”""content="“width=device-width，"user-scalable=no，"initial-scale=1.0，"maximum-scale=1.0，"minimum-scale=1.0”gt;。網(wǎng)頁效果如圖2所示。1.2""流動(dòng)布局隨著多種終端設(shè)備的日益涌現(xiàn)，以固定寬度為主的網(wǎng)頁布局已不能滿足用戶需求。響應(yīng)式Web摒棄剛性的、固定的網(wǎng)頁布局，采用流動(dòng)布局來自適應(yīng)不同設(shè)備的視口寬度，主要手段包括使用百分比布局和設(shè)置浮動(dòng)屬性[3，4]。百分比布局實(shí)現(xiàn)網(wǎng)頁隨屏幕大小的改變而自動(dòng)調(diào)整，浮動(dòng)布局實(shí)現(xiàn)區(qū)塊的動(dòng)態(tài)重組。1.2.1""百分比布局當(dāng)網(wǎng)頁寬度固定時(shí)，如果用戶使用小屏幕設(shè)備或放大網(wǎng)頁時(shí)，頁面內(nèi)容會(huì)顯示不全，只能移動(dòng)滾動(dòng)條翻看內(nèi)容。采用百分比布局技術(shù)可以解決此類問題，通過將固定尺寸（px）轉(zhuǎn)換為相對(duì)尺寸（%）。Ethan"Marcotte曾提出一種轉(zhuǎn)換方式：百分比寬度=目標(biāo)元素寬度÷父元素寬度。1.2.2""浮動(dòng)屬性當(dāng)設(shè)備屏幕寬度不足以放下網(wǎng)頁中所有區(qū)塊（div）時(shí)，將這些區(qū)塊設(shè)置為浮動(dòng)（float）屬性，區(qū)塊可以自動(dòng)移到下一行，從而實(shí)現(xiàn)網(wǎng)頁浮動(dòng)布局。例如：將左邊內(nèi)容欄（#left）、中間內(nèi)容欄（#middle）和右邊內(nèi)容欄（#right）分別設(shè)置為（#left{width：200px;float：left;}）、#middle{width：400px;float：left;}）和（#right{width：200px;float：left;}）時(shí)，會(huì)出現(xiàn)三欄布局，當(dāng)縮小瀏覽器窗口或使用屏幕較小的設(shè)備時(shí)，由于設(shè)置了浮動(dòng)屬性，中間或右邊區(qū)塊由于頁面空間不足將自動(dòng)布局為雙欄樣式或單欄樣式，很好地自適應(yīng)設(shè)備屏幕寬度。1.3""媒體查詢技術(shù)CSS3中的媒體查詢（Media"Queries）[5，6]是響應(yīng)式Web設(shè)計(jì)的關(guān)鍵技術(shù)，該技術(shù)指的是根據(jù)設(shè)備實(shí)際情況，通過lt;linkgt;標(biāo)簽或@media規(guī)則，選擇對(duì)應(yīng)的CSS樣式文件來渲染不同的網(wǎng)頁效果。lt;linkgt;標(biāo)簽可以根據(jù)不同情況加載不同的CSS樣式文件，從一組CSS樣式切換到另一組CSS樣式。@media規(guī)則也指根據(jù)不同的設(shè)備情況選擇對(duì)應(yīng)的CSS樣式文件，該技術(shù)可以根據(jù)瀏覽器視口變化選擇相關(guān)的樣式文件合理顯示網(wǎng)頁內(nèi)容。當(dāng)視口寬度較小時(shí)顯示網(wǎng)頁的一部分內(nèi)容，當(dāng)視口寬度較大時(shí)可將網(wǎng)頁內(nèi)容全部顯示，進(jìn)一步提升網(wǎng)頁加載速度，增強(qiáng)用戶體驗(yàn)感。實(shí)例中的響應(yīng)式Web在PC端瀏覽時(shí)，導(dǎo)航按鈕以平鋪樣式分布，主體圖片全部顯示，網(wǎng)頁效果如圖3所示。當(dāng)設(shè)備視口寬度小于等于480"px（如手機(jī)）時(shí)，導(dǎo)航按鈕相繼隱藏，以下拉菜單方式呈現(xiàn)，主體圖片部分顯示，網(wǎng)頁效果如圖4所示。1.4""彈性視覺媒體技術(shù)1.4.1""彈性圖片當(dāng)網(wǎng)頁利用浮動(dòng)布局技術(shù)時(shí)，如果圖片寬度固定，瀏覽器窗口伸縮，圖片會(huì)不規(guī)則移動(dòng)，甚至超出包含它的父元素。CSS3的max-width屬性通過為圖像設(shè)置百分比寬度，保持max-width值與圖像寬度一致，從而實(shí)現(xiàn)彈性圖片，確保圖片隨窗口元素伸縮而不失真地自由縮放，防止大圖片在小屏幕上顯示不合理問題。為了提高網(wǎng)頁加載速度，減少HTTP請(qǐng)求次數(shù)至關(guān)重要。利用CSS"Sprites技術(shù)，將多張圖片組合為一張圖片，在網(wǎng)頁加載時(shí)只需加載一整張圖，有效減少了HTTP的請(qǐng)求次數(shù)，使得網(wǎng)頁加載速度更快。1.4.2""彈性文字為了使網(wǎng)頁中的文字隨窗口伸縮而自由縮放，可以將CSS中font-size值用相對(duì)單位（em）代替絕對(duì)單位（px）。當(dāng)其父元素字號(hào)根據(jù)不同設(shè)備變化時(shí)，該元素的字號(hào)也隨父元素成比例縮放。通常情況下，瀏覽器字體默認(rèn)為16"px，為了簡化font-size的換算，CSS中可以全局聲明body{font-size：62.5%;}，即自定義瀏覽器字體為10"px，px與em通過除以10進(jìn)行轉(zhuǎn)換。（因?yàn)?6"px=1em，16"px=100%，所以1"px=0.0625em"，1"px=6.25%，10"px=62.5%）。2""網(wǎng)頁加載速度測(cè)試為了進(jìn)一步測(cè)試網(wǎng)頁性能，本文對(duì)響應(yīng)式Web與非響應(yīng)式Web的頁面響應(yīng)時(shí)間進(jìn)行對(duì)比分析。通過網(wǎng)站性能測(cè)試軟件“WebPagetest”，選取iPhone6/7/8模擬移動(dòng)端瀏覽器，對(duì)本文實(shí)例中響應(yīng)式Web與非響應(yīng)式Web首次被訪問的響應(yīng)時(shí)間進(jìn)行測(cè)試與對(duì)比分析。具體方法如下：打開官方網(wǎng)址：https：///，在頁面中輸入待測(cè)網(wǎng)頁地址，分別選擇測(cè)試地點(diǎn)和瀏覽器類別，進(jìn)行測(cè)試，如圖5所示。通過分別輸入響應(yīng)式網(wǎng)頁和相應(yīng)的非響應(yīng)式網(wǎng)頁地址，頁面響應(yīng)時(shí)間的測(cè)試結(jié)果如表1、表2所示。從表1、表2中發(fā)現(xiàn)，用戶訪問響應(yīng)式Web比非響應(yīng)式Web節(jié)約了1.01"s，網(wǎng)頁的響應(yīng)時(shí)間代表用戶對(duì)網(wǎng)站整體的滿意度。8"s原則是互聯(lián)網(wǎng)的一個(gè)著名的原則，當(dāng)用戶訪問網(wǎng)頁時(shí)，如果超過8"s就會(huì)煩躁不安，如果等待時(shí)間更久，則會(huì)放棄繼續(xù)瀏覽網(wǎng)頁。統(tǒng)計(jì)表明，網(wǎng)頁響應(yīng)時(shí)間延遲1"s會(huì)導(dǎo)致用戶訪問量下降7%，假如一個(gè)網(wǎng)站每日收益為10萬美元，延遲1"s每年可能損失250萬美元，足以表明縮短網(wǎng)頁加載時(shí)間的重要性。響應(yīng)式Web設(shè)計(jì)通過融合Viewport屬性、流動(dòng)布局、媒體查詢和彈性視覺媒體關(guān)鍵技術(shù)，實(shí)現(xiàn)網(wǎng)頁自適應(yīng)不同終端設(shè)備，為不同用戶提供良好的體驗(yàn)感。經(jīng)網(wǎng)頁性能測(cè)試，結(jié)果表明，響應(yīng)式Web與非響應(yīng)式Web相比，網(wǎng)頁響應(yīng)時(shí)間大幅縮短，加載速度明顯提高，因此在HTML5、CSS3、JavaScript等Web技術(shù)的日益成熟下，響應(yīng)式Web設(shè)計(jì)會(huì)以其良好的呈現(xiàn)效果和快捷的訪問速度，逐漸取代傳統(tǒng)的網(wǎng)頁設(shè)計(jì)，成為未來網(wǎng)頁開發(fā)的主流方向。[1]孫帥.響應(yīng)式網(wǎng)頁在跨平臺(tái)移動(dòng)終端設(shè)備上的設(shè)計(jì)與研究[J].信息與電腦（理論版），2023，35（15）：103-105，150.[2]直敏，高天哲，孫楊.響應(yīng)式布局在網(wǎng)頁設(shè)計(jì)中的應(yīng)用[J].無線互聯(lián)科技，2022，19（15）：150-152.[3]魯鑫超.響應(yīng)式技術(shù)在