基于HTML5和CSS3的響應式網頁設計與實現

2020-07-13 06:34:08李念武漢東湖學院計算機科學學院

消費導刊 2020年29期

李念武漢東湖學院計算機科學學院

一、響應式網頁設計理念

隨著智能手機和各種便攜式電子產品的出現，傳統針對電腦端的網頁設計技術無法保證網頁在這些移動設備上有很好的顯示效果和用戶體驗，但是如果針對每一款設備單獨開發一個網站這樣不僅增加了開發的成本，也給網頁設計師們帶來了許多重復性的工作。而響應式Web 開發技術的出現正好緩解了這一尷尬現狀。

響應式Web設計開發思想，最早在2010年5月由國外著名網頁設計師提出。核心思想是頁面的設計與開發應當根據用戶行為以及所使用設備的軟硬件環境進行自動調整，這些軟硬件環境包括：平臺的系統，瀏覽器窗口，屏幕大小，屏幕定向等。

響應式網頁開發的核心是指在對頁面進行設計時，充分考慮移動設備的屏幕大小、分辨率的特性等。應優先考慮移動設備的這些特性，然后在設計頁面時從最小尺寸的展示效果入手進行版面設計與布局，在布局滿足了最小尺寸的屏幕顯示以后再逐漸加大顯示尺寸，調整布局內的各個模塊的排列方式，使每個元素的顯示效果，長寬高等參數能自動適應瀏覽器窗口及終端設備的屏幕分辨率。在小尺寸顯示時，可以適當降低圖片素材的分辨率，文字內容部分可以盡量以標題的形式少量出現，具體內容可以放在子頁面中展示。然后當窗口或設備的顯示尺寸變大時，內容慢慢豐富，圖片逐漸清晰。

二、核心技術

（一）HTML5

HTML5是一種具有跨平臺特點的網頁設計語言，其語法結構不受任何平臺和系統的限制，編寫靈活簡單，且適用于現有的主流操作系統、主流的終端設備。這一特點正好與“響應式網頁設計”中的跨平臺不謀而合，HTML5語言跨平臺的兼容性使得它在響應式開發中有著得天獨厚的優勢。

（二）CSS3

CSS3 中新增的媒體查詢（Media Queries）模塊提供了向終端設備或顯示平臺查詢媒體類型的功能，通過添加規范的查詢表達式來實現對當前媒體顯示效果的自動匹配。

（三）流動網格

流動網格布局使得各層塊的位置具有浮動特性，圖片、文字等網頁元素的屬性單位會由以前的像素為轉變成以百分比或者是字體比例的形式。如：某DIV塊的寬由100px變成20%等。這樣一來網頁元素的尺寸就能靈活地根據媒體查詢的結果來自動調整顯示值。

（四）彈性圖片

彈性圖片是指圖片的大小具有彈性。或一幅圖片在800像素以上寬度的設備上顯示為 480px＊480px，那么用彈性圖片的設計原則，其寬和高則可以同時設置為60%。這樣一來當頁面在320像素寬的設備上顯示時，圖片的大小則會自動調整為192px＊192px。

三、網頁設計與實現

（一）布局設計

本文以企業網站面面為便來完成響應式網頁的設計與實現。網頁的布局應達到自動適應PC機、平板電腦、手機等終端設備的顯示效果。整個頁面分為七大模塊：#header-wrap(logo)、#main navigation、#layerslider、#home-intro、#feature-block、#intro-features、#copyrights。七大模塊在頁面中分布于七行，占滿瀏覽器整個窗口寬度。其中#feature-block模塊被分成三列，#intro-features模塊包含四列。這兩上模塊將會通過媒體查詢來改變其列寬，以實現響應式布局的效果。

（二）viewport設計

自動適應終端設備的顯示效果，首先必須要通過視口viewport來獲取到顯示設備或窗口的當前寬度值，同時還可以調整顯示窗口的大小以適應設備，然后設置窗口大小固定，禁止用戶對顯示窗口進行放大縮小操作。

（三）媒體查詢設計

本網站設置了三種不同的媒體查詢功能，分別適用于窗口寬度介于768px-959px的PC端、480px-767px、320px-479px的移動終端。在移動終端設備上原有的導航欄將被設置為不可見，將菜單放置于一個“