響應式Web關鍵技術研究

摘"要：針對網頁不能自動識別設備分辨率，導致頁面布局混亂、加載速度緩慢、人機交互性差等問題，提出響應式Web“一源多屏”的設計方案。通過融合Viewport屬性、流動布局、媒體查詢和彈性視覺媒體關鍵技術，使網頁在不同設備下頁面布局更合理。經WebPagetest測試表明，響應式Web與非響應式Web相比，頁面加載速度明顯提高，響應時間大幅縮短，進一步提升了用戶體驗感。

關鍵字：響應式Web設計""Viewport屬性""流動布局""媒體查詢""彈性視覺媒體""HTML5技術""CSS3

Research"on"Key"Technologies"of"Responsive"Web

LIU"Ting

Department"of"Science，"Taiyuan"Institute"of"Technology，"Taiyuan，"Shanxi"Province，"030008"China

Abstract："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

隨著移動互聯網的崛起，互聯網用戶使用手機、平板等終端設備上網已成為一種趨勢，然而不同設備的屏幕尺寸、分辨率甚至屏幕定向方式都有所不同，導致同一網頁在不同設備上出現頁面布局混亂、用戶體驗差等問題。之前的解決方案是為不同設備設計不同版本的網頁，雖然可以保證頁面完美的呈現效果，但是要同時維護多個網站版本，大大增加了維護成本。于是，響應式Web設計（Responsive"Web"Design，RWD）應運而生，即設計與開發網頁時應根據用戶行為及不同設備采取相關的策略進行調整。

本文針對日益涌現的多種終端設備，融合Viewport屬性、流動布局、媒體查詢和彈性視覺媒體關鍵技術，實現響應式Web“一源多屏”的現實需求。當用戶瀏覽網頁時，頁面會根據多樣的設備重新排版，在盡可能短的時間內完成加載。同時，響應式Web也可以依據用戶手握設備的方向，主動進行橫豎屏切換，使網頁呈現最佳的布局。采用響應式Web只需對一個網站進行開發與維護，能夠有效減少開發周期與成本，是目前最受歡迎的Web設計方式[1，2]。

1""響應式Web關鍵技術探討

1.1""基于Viewport屬性識別設備分辨率

移動設備的Viewport屬性[3]是用來設置屏幕上可以顯示網頁區域的大小。通常，Viewport值大于瀏覽器的可視區域，因為移動設備的分辨率相較于PC機的分辨率小，為了能正常顯示為PC瀏覽器開發的網站，移動設備的瀏覽器把Viewport值設為980"px或1"024"px（也可能是其他值，由設備決定）。由于該Viewport值比瀏覽器的可視區域大，所以瀏覽器會出現水平滾動條，實例中網頁在Firefox攜帶的“響應式設計模式”下，模擬iPhone6，自定義分辨率375"px×667"px，網頁效果如圖1所示。

通過使用lt;metagt;元標簽設置Viewport屬性，當用戶訪問不同網頁時，可獲取設備自身寬度，從而確保瀏覽器視口最佳，不需要用戶手動移動水平滾動條瀏覽網頁，提高了用戶體驗，具體代碼如下：lt;meta""name="“viewport”""content="“width=device-width，"user-scalable=no，"initial-scale=1.0，"maximum-scale=1.0，"minimum-scale=1.0”gt;。網頁效果如圖2所示。

1.2""流動布局

隨著多種終端設備的日益涌現，以固定寬度為主的網頁布局已不能滿足用戶需求。響應式Web摒棄剛性的、固定的網頁布局，采用流動布局來自適應不同設備的視口寬度，主要手段包括使用百分比布局和設置浮動屬性[3，4]。百分比布局實現網頁隨屏幕大小的改變而自動調整，浮動布局實現區塊的動態重組。

1.2.1""百分比布局

當網頁寬度固定時，如果用戶使用小屏幕設備或放大網頁時，頁面內容會顯示不全，只能移動滾動條翻看內容。采用百分比布局技術可以解決此類問題，通過將固定尺寸（px）轉換為相對尺寸（%）。Ethan"Marcotte曾提出一種轉換方式：百分比寬度=目標元素寬度÷父元素寬度。

1.2.2""浮動屬性

當設備屏幕寬度不足以放下網頁中所有區塊（div）時，將這些區塊設置為浮動（float）屬性，區塊可以自動移到下一行，從而實現網頁浮動布局。例如：將左邊內容欄（#left）、中間內容欄（#middle）和右邊內容欄（#right）分別設置為（#left{width：200px;float：left;}）、#middle{width：400px;float：left;}）和（#right{width：200px;float：left;}）時，會出現三欄布局，當縮小瀏覽器窗口或使用屏幕較小的設備時，由于設置了浮動屬性，中間或右邊區塊由于頁面空間不足將自動布局為雙欄樣式或單欄樣式，很好地自適應設備屏幕寬度。

1.3""媒體查詢技術

CSS3中的媒體查詢（Media"Queries）[5，6]是響應式Web設計的關鍵技術，該技術指的是根據設備實際情況，通過lt;linkgt;標簽或@media規則，選擇對應的CSS樣式文件來渲染不同的網頁效果。lt;linkgt;標簽可以根據不同情況加載不同的CSS樣式文件，從一組CSS樣式切換到另一組CSS樣式。@media規則也指根據不同的設備情況選擇對應的CSS樣式文件，該技術可以根據瀏覽器視口變化選擇相關的樣式文件合理顯示網頁內容。當視口寬度較小時顯示網頁的一部分內容，當視口寬度較大時可將網頁內容全部顯示，進一步提升網頁加載速度，增強用戶體驗感。實例中的響應式Web在PC端瀏覽時，導航按鈕以平鋪樣式分布，主體圖片全部顯示，網頁效果如圖3所示。當設備視口寬度小于等于480"px（如手機）時，導航按鈕相繼隱藏，以下拉菜單方式呈現，主體圖片部分顯示，網頁效果如圖4所示。

1.4""彈性視覺媒體技術

1.4.1""彈性圖片

當網頁利用浮動布局技術時，如果圖片寬度固定，瀏覽器窗口伸縮，圖片會不規則移動，甚至超出包含它的父元素。CSS3的max-width屬性通過為圖像設置百分比寬度，保持max-width值與圖像寬度一致，從而實現彈性圖片，確保圖片隨窗口元素伸縮而不失真地自由縮放，防止大圖片在小屏幕上顯示不合理問題。

為了提高網頁加載速度，減少HTTP請求次數至關重要。利用CSS"Sprites技術，將多張圖片組合為一張圖片，在網頁加載時只需加載一整張圖，有效減少了HTTP的請求次數，使得網頁加載速度更快。

1.4.2""彈性文字

為了使網頁中的文字隨窗口伸縮而自由縮放，可以將CSS中font-size值用相對單位（em）代替絕對單位（px）。當其父元素字號根據不同設備變化時，該元素的字號也隨父元素成比例縮放。通常情況下，瀏覽器字體默認為16"px，為了簡化font-size的換算，CSS中可以全局聲明body{font-size：62.5%;}，即自定義瀏覽器字體為10"px，px與em通過除以10進行轉換。（因為16"px=1em，16"px=100%，所以1"px=0.0625em"，1"px=6.25%，10"px=62.5%）。

2""網頁加載速度測試

為了進一步測試網頁性能，本文對響應式Web與非響應式Web的頁面響應時間進行對比分析。通過網站性能測試軟件“WebPagetest”，選取iPhone6/7/8模擬移動端瀏覽器，對本文實例中響應式Web與非響應式Web首次被訪問的響應時間進行測試與對比分析。具體方法如下：打開官方網址：https：//www.webpagetest.org/，在頁面中輸入待測網頁地址，分別選擇測試地點和瀏覽器類別，進行測試，如圖5所示。

通過分別輸入響應式網頁和相應的非響應式網頁地址，頁面響應時間的測試結果如表1、表2所示。

從表1、表2中發現，用戶訪問響應式Web比非響應式Web節約了1.01"s，網頁的響應時間代表用戶對網站整體的滿意度。8"s原則是互聯網的一個著名的原則，當用戶訪問網頁時，如果超過8"s就會煩躁不安，如果等待時間更久，則會放棄繼續瀏覽網頁。統計表明，網頁響應時間延遲1"s會導致用戶訪問量下降7%，假如一個網站每日收益為10萬美元，延遲1"s每年可能損失250萬美元，足以表明縮短網頁加載時間的重要性。

3""結語

響應式Web設計通過融合Viewport屬性、流動布局、媒體查詢和彈性視覺媒體關鍵技術，實現網頁自適應不同終端設備，為不同用戶提供良好的體驗感。經網頁性能測試，結果表明，響應式Web與非響應式Web相比，網頁響應時間大幅縮短，加載速度明顯提高，因此在HTML5、CSS3、JavaScript等Web技術的日益成熟下，響應式Web設計會以其良好的呈現效果和快捷的訪問速度，逐漸取代傳統的網頁設計，成為未來網頁開發的主流方向。

參考文獻

[1]孫帥.響應式網頁在跨平臺移動終端設備上的設計與研究[J].信息與電腦（理論版），2023，35（15）：103-105，150.

[2]直敏，高天哲，孫楊.響應式布局在網頁設計中的應用[J].無線互聯科技，2022，19（15）：150-152.

[3]魯鑫超.響應式技術在網頁設計中的應用——以天津美術館為例[D].天津：天津職業技術師范大學，2022.

[4]黑子微.探究響應式網頁設計在不同設備上的實現方式與原理[J].電子測試，"2020（22）："137-138，116.

[5]張麗.以HTML5+CSS3+jQuery為基礎的響應式布局網頁設計探討[J].計算機產品與流通，2019（11）：195，198.

[6]趙怡姍，范明鈺.基于HTML5與CSS3的網頁設計技術研究[J].成都信息工程大學學報，2021，36（6）：641-645.