使用響應(yīng)式Web設(shè)計(jì)技術(shù)開(kāi)發(fā)網(wǎng)站

蔡伯峰 封景園

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

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

中圖分類號(hào) ?TP39 ?文獻(xiàn)標(biāo)識(shí)碼 ?A

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

一、響應(yīng)式Web設(shè)計(jì)概述

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

（一）視口

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

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

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

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

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

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

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

（二）媒體查詢

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

<style>

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

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

}

</style>

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

在使用多個(gè)max-width區(qū)分屏幕時(shí)，要按照從大屏到小屏的順序編寫代碼，因?yàn)镃SS代碼的執(zhí)行順序是從上到下，而使用min-width時(shí)要按照從小屏到大屏的順序編寫代碼。

（三）百分比布局

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

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

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

二、響應(yīng)式Web設(shè)計(jì)常見(jiàn)的實(shí)現(xiàn)方式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

四、結(jié)語(yǔ)

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

參考文獻(xiàn)：

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

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

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

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

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

作者簡(jiǎn)介：

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

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

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