基于HTML5的響應(yīng)式環(huán)保網(wǎng)站設(shè)計與實現(xiàn)

摘? 要：隨著移動智能設(shè)備的發(fā)展，出現(xiàn)了各種屏幕尺寸的移動設(shè)備，如何在不同分辨率設(shè)備上將同一網(wǎng)頁內(nèi)容完美地顯示出來，而不會出現(xiàn)顯示樣式錯亂，響應(yīng)式網(wǎng)頁設(shè)計解決了這一難題。響應(yīng)式網(wǎng)站可以在不同終端顯示出合理的頁面，實現(xiàn)一次開發(fā)，多處適用。文章以“環(huán)保網(wǎng)站”為例，從響應(yīng)式網(wǎng)頁設(shè)計的相關(guān)概念介紹、頁面結(jié)構(gòu)設(shè)計、響應(yīng)式效果實現(xiàn)等幾方面入手，采用HTML5技術(shù)，結(jié)合百分比布局、媒體查詢、視口等實現(xiàn)了跨終端的網(wǎng)頁開發(fā)。

關(guān)鍵詞：響應(yīng)式布局；HTML5；環(huán)保網(wǎng)站

中圖分類號：TP393? 文獻標識碼：A? 文章編號：2096-4706（2023）13-0088-04

Design and Implementation of a Responsive Environmental Protection Website Based on HTML5

ZHANG Rihua

（Shandong Huayu University of Technology， Dezhou? 253034， China）

Abstract： With the development of mobile intelligent devices， mobile devices with various screen sizes have emerged. Responsive webpage design has solved the problem that display the same webpage content perfectly on devices with different resolutions without display style confusion. A responsive website can display reasonable pages on different terminals， achieving one-time development and multiple applicability. Taking“environmental protection website”as an example， this paper starts with the introduction of relevant concepts of responsive webpage design， the design of page structure， and the realization of responsive effect. It uses HTML5 technology， combined with percentage layout， media query， viewport， etc.， to realize cross terminal webpage development.

Keywords： responsive layout; HTML5; environmental protection website

0? 引? 言

隨著網(wǎng)絡(luò)的發(fā)展和普及，以及各種建站技術(shù)的更新與運用，響應(yīng)式網(wǎng)站已經(jīng)被廣泛應(yīng)用。其現(xiàn)代化的流式布局，可自動適應(yīng)屏幕大小，實現(xiàn)多終端覆蓋；同時，高端的設(shè)計、豐富的特效讓頁面更精美。本文以“環(huán)保網(wǎng)站”為例，通過百分比布局、媒體查詢和視口屬性設(shè)置等綜合應(yīng)用[1]，實現(xiàn)一個非常有意義的環(huán)保網(wǎng)站。

1? 響應(yīng)式網(wǎng)頁設(shè)計的相關(guān)概念

1.1? 網(wǎng)頁視口

視口（viewport）是用戶在網(wǎng)頁上的可見區(qū)域。視口隨設(shè)備而異，在移動電話上會比在計算機屏幕上更小。通過設(shè)置視口，不管網(wǎng)頁原來的分辨率有多大，手機都能將其縮小顯示在手機瀏覽器上。在移動端瀏覽器中，存在三種視口，分別是布局視口、視覺視口和理想視口：

1）布局視口（也叫視窗視口）：指瀏覽器繪制網(wǎng)頁的視口，一般移動端瀏覽器都默認設(shè)置了布局視口的寬度。

2）視覺視口（也叫可見視口）：指用戶正在看到的網(wǎng)站的區(qū)域，這個區(qū)域的寬度等同于移動設(shè)備的瀏覽器窗口的寬度。

3）理想視口：對設(shè)備來講最理想的視口尺寸。使用理想視口的方式：可以使網(wǎng)頁在移動端瀏覽器上獲得最理想的瀏覽和閱讀的寬度。

1.2? 媒體查詢

HTML4和CSS2可以支持不同的媒體類型（screen屏幕和print打?。┰O(shè)置特定的CSS樣式[2]，在CSS3規(guī)范中，媒體查詢用來根據(jù)窗口寬度、屏幕比例和設(shè)備方向等差異來改變頁面的顯示方式。使用媒體查詢能夠在不改變頁面內(nèi)容的情況下，為特定的輸出設(shè)備指定顯示效果。

媒體查詢有媒體類型和條件表達式組成，代碼如下：

1.3? 百分比布局

在制作響應(yīng)式網(wǎng)站時，僅使用媒體查詢還不夠，媒體查詢只針對某種特定的視口，在捕捉到下一個視口前，頁面的布局并不會變化。真正的靈活布局可以使用百分比布局結(jié)合媒體查詢限制范圍來實現(xiàn)。百分比布局是一種等比例縮放布局方式，在CSS代碼中使用百分比來設(shè)置寬度，百分數(shù)寬度的計算方式為：用目標元素寬度除以父盒子的寬度。

1）子元素的寬高百分比是直接父元素的寬高。

2）定位中的top、bottom、left、right等都是相對于直接非靜態(tài)定位的父元素的寬高。

3）padding如果設(shè)置百分比，無論是垂直方向還是水平方向，都是相對于直接父級元素的寬度，與父元素的高度無關(guān)。

4）margin與padding一樣，設(shè)置完百分比之后，都是直接父元素的寬度的百分比，與高度無關(guān)。

5）border-radius不同，如果設(shè)置百分比，則是相對于自身的寬度，除此之外translate、background-size都是相對于自身的寬度高度。

1.4? 響應(yīng)式布局實現(xiàn)方式

1.4.1? 媒體查詢實現(xiàn)響應(yīng)式布局

媒體查詢實現(xiàn)響應(yīng)式布局：當瀏覽器屏幕寬度小于576 px時，將某些模塊按照不同的方式排列或者隱藏。在特定的屏幕尺寸下編寫限定條件的CSS代碼，如果滿足這些限定條件，則應(yīng)用相應(yīng)的樣式。

1.4.2? 彈性盒布局

彈性布局是一種十分方便的、只需要依賴于CSS樣式的實現(xiàn)響應(yīng)式布局的方式，彈性盒由容器、子元素和軸（包括橫軸、縱軸）構(gòu)成，默認情況下，子元素的排布方向與橫軸的方向是一致的。彈性布局flex是CSS中display的一個屬性值，通過在父容器上添加display：flex;屬性，便可以實現(xiàn)其子元素在父元素中的彈性布局。但要注意的是，display：flex;這一條樣式只會作用在添加這一屬性的父容器和非隔代子容器上，并不會使其直系子元素中的子元素產(chǎn)生彈性布局。如果想要在下一層中繼續(xù)使用彈性布局，我們可以在相應(yīng)的子元素上再次添加display：flex;屬性來實現(xiàn)。

2? 環(huán)保網(wǎng)站頁面結(jié)構(gòu)分析

響應(yīng)式頁面由header、banner、mission及footer四大部分構(gòu)成，如圖1所示。

1）響應(yīng)式頁面各部分的寬度用百分比表示。

2）header里面包括導(dǎo)航菜單和Logo左右兩部分，其中Logo部分使用絕對定位；在