基于HTML5的響應式環保網站設計與實現

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

關鍵詞：響應式布局；HTML5；環保網站

中圖分類號：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? 引? 言

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

1? 響應式網頁設計的相關概念

1.1? 網頁視口

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

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

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

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

1.2? 媒體查詢

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

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

1.3? 百分比布局

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

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

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

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

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

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

1.4? 響應式布局實現方式

1.4.1? 媒體查詢實現響應式布局

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

1.4.2? 彈性盒布局

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

2? 環保網站頁面結構分析

響應式頁面由header、banner、mission及footer四大部分構成，如圖1所示。

1）響應式頁面各部分的寬度用百分比表示。

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