基于HTML5和CSS3的響應(yīng)式網(wǎng)頁設(shè)計與實現(xiàn)

2020-07-13 06:34李念武漢東湖學(xué)院計算機(jī)科學(xué)學(xué)院

消費導(dǎo)刊 2020年29期

李念武漢東湖學(xué)院計算機(jī)科學(xué)學(xué)院

一、響應(yīng)式網(wǎng)頁設(shè)計理念

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

響應(yīng)式Web設(shè)計開發(fā)思想，最早在2010年5月由國外著名網(wǎng)頁設(shè)計師提出。核心思想是頁面的設(shè)計與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及所使用設(shè)備的軟硬件環(huán)境進(jìn)行自動調(diào)整，這些軟硬件環(huán)境包括：平臺的系統(tǒng)，瀏覽器窗口，屏幕大小，屏幕定向等。

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

二、核心技術(shù)

（一）HTML5

HTML5是一種具有跨平臺特點的網(wǎng)頁設(shè)計語言，其語法結(jié)構(gòu)不受任何平臺和系統(tǒng)的限制，編寫靈活簡單，且適用于現(xiàn)有的主流操作系統(tǒng)、主流的終端設(shè)備。這一特點正好與“響應(yīng)式網(wǎng)頁設(shè)計”中的跨平臺不謀而合，HTML5語言跨平臺的兼容性使得它在響應(yīng)式開發(fā)中有著得天獨厚的優(yōu)勢。

（二）CSS3

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

（三）流動網(wǎng)格

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

（四）彈性圖片

彈性圖片是指圖片的大小具有彈性?；蛞环鶊D片在800像素以上寬度的設(shè)備上顯示為 480px＊480px，那么用彈性圖片的設(shè)計原則，其寬和高則可以同時設(shè)置為60%。這樣一來當(dāng)頁面在320像素寬的設(shè)備上顯示時，圖片的大小則會自動調(diào)整為192px＊192px。

三、網(wǎng)頁設(shè)計與實現(xiàn)

（一）布局設(shè)計

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

（二）viewport設(shè)計

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

（三）媒體查詢設(shè)計

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

国产日韩欧美一区二区三区三州_亚洲少妇熟女av_久久久久亚洲av国产精品_波多野结衣网站一区二区_亚洲欧美色片在线91_国产亚洲精品精品国产优播av_日本一区二区三区波多野结衣 _久久国产av不卡