使用響應式Web設計技術開發網站

蔡伯峰 封景園

摘 要：為適應在各種上網設備尤其是移動設備上瀏覽網站的需要，介紹了利用基于H5的媒體查詢、彈性盒布局等響應式Web設計技術開發響應式網站的方法，并實際分析了一個典型響應式網站主頁的設計制作，這對于設計制作類似的網站有很好的借鑒意義。使用響應式Web設計技術開發的網站實現了一次開發、多處適用，從而極大地提高了網站開發效率。

關鍵詞：響應式Web設計;媒體查詢;彈性盒布局;HTML5

中圖分類號 ?TP39 ?文獻標識碼 ?A

據中國互聯網信息中心報告，隨著中國經濟由高速增長階段轉向高質量發展階段，移動支付、網約車、互聯網醫療、在線教育等各類“互聯網+”新業態層出不窮，我國網民規模及互聯網普及率均呈現快速增長態勢，截至2020年3月底，我國網民規模達9.04億，互聯網普及率為64.5%。手機網民規模達8.97億人，遠超電腦網民規模，而使用手機上網的比例高達99.3%、使用臺式電腦上網的比例42.7%、使用筆記本電腦上網的比例35.1%、使用平板電腦上網的比例29%、使用電視上網的比例32%。移動互聯網的影響力不斷擴大，占有網民幾乎所有的碎片時間，瀏覽信息、聊天、購物越來越依賴手機。但目前仍有相當多的單位發布的網站只有電腦版網站版本，不方便在各種移動設備上瀏覽;或者是相分離的電腦版與手機版網站，這增加了網站設計開發、維護和運營成本。隨著H5、媒體查詢、Bootstrap等標準規范和新技術新方法的陸續發布和推出，其在提高網站的可用性和改進用戶友好體驗、輕松使用多媒體元素、精簡代碼優化流量、對SEO更加友好、可移植性等方面的性能大幅提高，給現有網站的更新升級提供了極大便利[1]。本文介紹用基于H5的媒體查詢、彈性盒布局等響應式Web設計技術開發網站。

一、響應式Web設計概述

響應式Web設計既是一種終端的網頁開發技術，也是網頁設計領域的一種新理念，它顏覆了之前的網頁設計思想[1]。使用響應式Web設計技術開發的響應式網站可以針對不同的終端顯示出合理的頁面，實現一次開發、多處適用。響應式Web設計涉及到視口、媒體查詢、百分比布局、柵格系統等內容。

（一）視口

響應式Web設計需要考慮網站頁面在PC端和移動端設備上的呈現效果，而移動端頁面的顯示效果與移動設備的視口有關[2]。視口最早是由蘋果公司為iOS系統的Safari瀏覽器引入的概念，其目的是讓iPhone手機的小屏幕盡可能完整地顯示整個網頁。通過設置視口，不管網頁原始的分辨率有多大，手機系統都能將其縮小顯示在手機瀏覽器上，這樣保證網頁在手機上看起來更像在桌面瀏覽器中的樣子[3]。在移動端瀏覽器中，存在著如下三種視口。

布局（視窗）視口是瀏覽器繪制網頁的視口，一般移動端瀏覽器都默認設置了布局視口的寬度。當移動端瀏覽器展示PC端網頁時，在瀏覽器中會出現水平滾動條，通過左右滑動滾動條才能查看完整的一行內容，這是布局視口存在的問題。

視覺（可見）視口是用戶正在看到的頁面區域，其寬度等同于移動設備的瀏覽器窗口的寬度，當在手機中縮放網頁的時候，操作的是視覺視口，而布局視口仍然保持原來的寬度。

理想視口是指對設備來講最理想的視口，它可使網頁在移動端瀏覽器上獲得最理想的瀏覽和閱讀的寬度[4]。即在理想視口的情況下，布局視口的大小和屏幕寬度是一致的，這樣就不需要左右滑動頁面了。

在網站開發中，要實現理想視口，需要給頁面添加<meta>標簽來配置視口，通知瀏覽器進行處理，配置代碼如下。

<meta name="vievport" content="user-scalable=no， width=device-width， initial-scale=1.0， maximum- scale=1.0”>

上述代碼中，user-scalable用于設置用戶是否可以縮放，默認為yes;width=device-width用于設置視口的寬度，這里表示布局視口和可見視覺寬度相同，該屬性也可以設置成具體寬度;initial-scale用于初始縮放比例，取值為0.0～10.0;maximum-scale用于設置最大縮放比例，取值為0.0～10.0。除此之外還可以通過 height設置布局視口高度、minimum-scale設置最小縮放比例。

（二）媒體查詢

CSS3媒體查詢（ Media Query）用來根據窗口寬度、屏幕比例和設備方向等差異改變頁面顯示方式。它能夠在不改變頁面內容的情況下，為特定的輸出設備指定顯示效果。媒體查詢由媒體類型和條件表達式組成：

<style>

@media screen and （max-width： 960px） {

/*樣式設置*/

}

</style>

上述代碼表示媒體類型為screen（通常省略）并且屏幕寬度小于等于960px時的樣式。

在使用多個max-width區分屏幕時，要按照從大屏到小屏的順序編寫代碼，因為CSS代碼的執行順序是從上到下，而使用min-width時要按照從小屏到大屏的順序編寫代碼。

（三）百分比布局

在制作響應式網站時，僅使用媒體查詢是遠遠不夠的。這是由于媒體查詢只能針對某幾個特定階段的視口，在捕捉到下一個視口前，頁面的布局是不會變化的，這樣會影響頁面的顯示，同時也無法兼容日益增多的各種設備。所以，想要做出真正靈活的頁面，還需要使用百分比布局結合媒體查詢限制范圍來實現。百分比布局是一種等比例縮放布局方式，在CSS代碼中使用百分比來設置寬度。百分數寬度的計算方式是：用目標元素寬度除以父盒子的寬度。

（四）柵格系統

柵格系統就用固定的格子進行網頁布局，是一種清晰、工整的設計風格。它最早應用于印刷媒體上，將一個印刷版面劃分為若干個格子，再在這些格子上進行排版，就方便多了。隨著響應式設計的推出和流行，棚格系統被賦予了新的意義，即一種響應式設計的實現方式。在使用棚格系統進行頁面布局時，可以讓一個網頁在不同大小的屏幕上呈現出不同的結構：將任何屏幕的每一行都分成12格，每一行的布局的元素個數可以隨屏幕大小的不同而不同，每個元素占用12格中的1個或多個格子，即小屏時每行的元素個數少而每個元素占用格子多，大屏時每行的元素個數多而每個元素占用格子少。

二、響應式Web設計常見的實現方式

設計響應式網站，關鍵是設計出各個響應式網頁，而要布局設計響應式網頁，通常有兩種常見的實現方式：使用媒體查詢和使用彈性盒布局。

（一）使用媒體查詢實現響應式網頁布局

使用棚格系統可以使頁面隨著屏幕寬度的不同呈現出不同的結構，在實際開發中要實現這種效果，可以通過媒體查詢來實現，即在特定的屏幕尺寸下編寫限定條件的CSS代碼，如果滿足這些限定條件，則應用相應的樣式。在CSS代碼中可以隱藏某些元素，也可設定每個元素占用的寬度，寬度通常是n/12*100% 。

<style>

@media screen and （max-width： 576px） {

aside{display：none;}

section{width：100%;}

}

@media screen and （max-width： 960px） {

aside{float：left; width：16.666667%;} ?/*寬度2/12，12表示12格*/

section{float：left;width：83.333333%;} /*寬度10/12*/

}

</style>

（二）使用彈性盒布局實現響應式網頁布局

CSS3的彈性盒布局可以輕松地創建響應式網頁布局，為盒狀模型增加靈活性[5]。彈性盒改進了塊模型，既不浮動，又不會合并彈性盒容器與其內容之間的外邊距，是一種非常靈活的布局方法。彈性盒是由容器、子元素和軸（包括橫軸、交叉軸）構成，并且默認情況下子元素的排列方向與橫軸方向一致。彈性盒模型可以用簡單的方式滿足很多常見的復雜的布局需求，其優勢在于開發人員只需聲明布局具有的行為，而不需要給出具體的實現方式，瀏覽器會自動負責完成實際的布局效果，目前主流瀏覽器的較新版本都支持彈性盒布局。

彈性盒布局提供了一些常用的CSS屬性。要使用彈性盒，首先使用display屬性指定父元素容器為彈性盒容器，然后使用flex-flow屬性設置子元素的排列方向、使用justify-content屬性設置子元素在主軸方向的排列方式、使用align-items屬性設置子元素在交叉軸上的對齊排列方式等，還可以使用order、flex、align-self等屬性調節單個元素的顯示。

三、使用響應式Web設計技術開發環保網站首頁

開發響應式網站可以使用文中介紹的兩種方式之一，此處對綜合使用視口、百分比布局、媒體查詢等技術相結合實現的環保網站首頁給出設計分析。環保網站首頁的頁面結構如圖1所示。

該響應式頁面由 header、banner、 mission和 footer 四部分構成，頁面實現細節為：

（1）響應式頁面的頭部通過<meta>設置視口。

（2）響應式頁面各部分的寬度用基于柵格計算出來的百分比表示，如header占12格，寬度設置為100%。

（3）header 里面包括導航菜單和Logo左右兩部分，其中導航菜單部分采用在<nav>中嵌套<ul>列表制作，Logo部分使用絕對定位。

（4）當屏幕縮小到575px時，出現漢堡菜單按鈕，該按鈕使用<label>標簽嵌套<img>標簽引入按鈕圖片。

（5）banner部分是給div.banner設置背景圖，當瀏覽器窗口縮小時，需要對div.banner設置媒體查詢。

（6）在PC端div.mission-left和div.mission-right兩部分橫向排列，寬度用基于柵格計算出來的百分比表示，而在移動端需要使用媒體查詢將其縱向排列，寬度為100%。

四、結語

本文介紹的基于H5技術的媒體查詢、彈性盒布局等響應式Web設計技術在開發響應式網站方面具有極大的優勢，開發者容易掌握和使用，只要掌握響應式設計理念并按照設計技術設計制作網站，就能開發出針對不同終端正常顯示出合理頁面的網站，實現一次開發、多處適用，這將極大提高開發效率，降低網站開發和維護成本。

參考文獻：

[1]鄭雅娟.響應式電子商務網頁設計研究[J].信息與電腦（理論版） ，2020（3）：10-11.

[2]蔣婧.響應式頁面的設計與實現[J].信息技術與信息化，2021（9）：65-67+71.

[3]郝偉斌.手機檔案網站信息的開發與服務[J].檔案管理，2016（1）：36-38.

[4]黃燕娟.淺論手機網站頁面設計的幾點原則——以東莞陽光手機網為例[J].網絡安全技術與應用，2015（5）：82，85.

[5]南楠.彈性布局在Web前端開發中的應用問題研究[J].內江科技，2021（7）：56-57.

作者簡介：

蔡伯峰（1967-），男，漢族，江蘇泰州人，泰州職業技術學院副教授、工程師，碩士，軟件開發、嵌入式與物聯網技術等。

基金來源：1、泰州職業技術學院2020年職業教育研究重點課題; 2、項目名稱：1+X證書在專業人才培養方案中的嵌入與實施——以計算機應用技術專業為例;3、項目編號：ZY202004。

基金來源：1、泰州職業技術學院大學生創新創業訓練計劃項目; 2、項目名稱：響應式公司網站設計;3、項目編號：1121621050。