蔡伯峰 封景園

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

關(guān)鍵詞：響應式Web設(shè)計;媒體查詢;彈性盒布局;HTML5

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

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

一、響應式Web設(shè)計概述

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

（一）視口

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

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

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

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

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

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

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

（二）媒體查詢

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

<style>

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

/*樣式設(shè)置*/

}

</style>

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

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

（三）百分比布局

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

（四）柵格系統(tǒng)

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

二、響應式Web設(shè)計常見的實現(xiàn)方式

設(shè)計響應式網(wǎng)站，關(guān)鍵是設(shè)計出各個響應式網(wǎng)頁，而要布局設(shè)計響應式網(wǎng)頁，通常有兩種常見的實現(xiàn)方式：使用媒體查詢和使用彈性盒布局。

（一）使用媒體查詢實現(xiàn)響應式網(wǎng)頁布局

使用棚格系統(tǒng)可以使頁面隨著屏幕寬度的不同呈現(xiàn)出不同的結(jié)構(gòu)，在實際開發(fā)中要實現(xiàn)這種效果，可以通過媒體查詢來實現(xiàn)，即在特定的屏幕尺寸下編寫限定條件的CSS代碼，如果滿足這些限定條件，則應用相應的樣式。在CSS代碼中可以隱藏某些元素，也可設(shè)定每個元素占用的寬度，寬度通常是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>

（二）使用彈性盒布局實現(xiàn)響應式網(wǎng)頁布局

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

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

三、使用響應式Web設(shè)計技術(shù)開發(fā)環(huán)保網(wǎng)站首頁

開發(fā)響應式網(wǎng)站可以使用文中介紹的兩種方式之一，此處對綜合使用視口、百分比布局、媒體查詢等技術(shù)相結(jié)合實現(xiàn)的環(huán)保網(wǎng)站首頁給出設(shè)計分析。環(huán)保網(wǎng)站首頁的頁面結(jié)構(gòu)如圖1所示。

該響應式頁面由 header、banner、 mission和 footer 四部分構(gòu)成，頁面實現(xiàn)細節(jié)為：

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

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

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

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

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

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

四、結(jié)語

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

參考文獻：

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

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

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

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

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

作者簡介：

蔡伯峰（1967-），男，漢族，江蘇泰州人，泰州職業(yè)技術(shù)學院副教授、工程師，碩士，軟件開發(fā)、嵌入式與物聯(lián)網(wǎng)技術(shù)等。

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

基金來源：1、泰州職業(yè)技術(shù)學院大學生創(chuàng)新創(chuàng)業(yè)訓練計劃項目; 2、項目名稱：響應式公司網(wǎng)站設(shè)計;3、項目編號：1121621050。