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

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

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

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

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

二、核心技術(shù)

（一）HTML5

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

（二）CSS3

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

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

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

（四）彈性圖片

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

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

（一）布局設(shè)計(jì)

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

（二）viewport設(shè)計(jì)

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

（三）媒體查詢?cè)O(shè)計(jì)

本網(wǎng)站設(shè)置了三種不同的媒體查詢功能，分別適用于窗口寬度介于768px-959px的PC端、480px-767px、320px-479px的移動(dòng)終端。在移動(dòng)終端設(shè)備上原有的導(dǎo)航欄將被設(shè)置為不可見(jiàn)，將菜單放置于一個(gè)“”表單控件中，變成下拉式折疊菜單效果。

（四）彈性設(shè)計(jì)

本網(wǎng)站中的彈性設(shè)計(jì)理念主要體現(xiàn)在字號(hào)、圖片大小以及內(nèi)外邊界值的自動(dòng)適應(yīng)。在彈性設(shè)計(jì)中，所有參數(shù)值都用相對(duì)大小，即百分比或em。被設(shè)置為相對(duì)大小的元素將會(huì)根據(jù)瀏覽器窗口的大小來(lái)自動(dòng)調(diào)整其顯示的像素值，既降低了代碼的復(fù)雜度又很好地提升了用戶體驗(yàn)。

（五）最終效果實(shí)現(xiàn)

本文最終實(shí)現(xiàn)的企業(yè)網(wǎng)站能自動(dòng)適應(yīng)用戶端的設(shè)備大小，會(huì)根據(jù)顯示設(shè)備的屏幕寬度來(lái)自動(dòng)匹配對(duì)應(yīng)的布局方案，圖片的顯示以及文字內(nèi)容的展示，模塊的排列對(duì)齊方式都會(huì)進(jìn)行相應(yīng)的調(diào)整，保證網(wǎng)頁(yè)的跨平臺(tái)顯示效果。

四、結(jié)論

本文通過(guò)實(shí)際案例驗(yàn)證了響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的有效性和可行性，本網(wǎng)站完全基于HTML5和CSS3開(kāi)發(fā)，應(yīng)用了先進(jìn)的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)體現(xiàn)實(shí)現(xiàn)了網(wǎng)站的“一次設(shè)計(jì)，普遍使用”的特點(diǎn)。對(duì)于開(kāi)發(fā)者而言開(kāi)發(fā)效率更高，更新方便，具有的特點(diǎn)，有效果地縮減了時(shí)間成本和人力成本。對(duì)于用戶而言，無(wú)論是在PC端還是在平板或者手機(jī)端都體驗(yàn)風(fēng)格內(nèi)容一致的網(wǎng)站，用戶體驗(yàn)較好。

猜你喜歡

終端設(shè)備網(wǎng)頁(yè)頁(yè)面

大狗熊在睡覺(jué)

大灰狼畫(huà)報(bào)·益智版(2024年3期)2024-12-09 00:00:00

刷新生活的頁(yè)面

保健醫(yī)苑(2022年1期)2022-08-30 08:39:14

視頻監(jiān)視系統(tǒng)新型終端設(shè)備接入方案

鐵道通信信號(hào)(2019年4期)2019-10-10 03:42:54

基于CSS的網(wǎng)頁(yè)導(dǎo)航欄的設(shè)計(jì)

電子制作(2018年10期)2018-08-04 03:24:38

基于URL和網(wǎng)頁(yè)類型的網(wǎng)頁(yè)信息采集研究

電子制作(2017年2期)2017-05-17 03:54:56

配電自動(dòng)化終端設(shè)備在電力配網(wǎng)自動(dòng)化的應(yīng)用

電子制作(2016年15期)2017-01-15 13:39:12

車站信號(hào)系統(tǒng)終端設(shè)備整合及解決方案

鐵道通信信號(hào)(2016年3期)2016-06-01 12:10:18

網(wǎng)頁(yè)制作在英語(yǔ)教學(xué)中的應(yīng)用

電子測(cè)試(2015年18期)2016-01-14 01:22:58

10個(gè)必知的網(wǎng)頁(yè)設(shè)計(jì)術(shù)語(yǔ)

計(jì)算機(jī)與網(wǎng)絡(luò)(2014年7期)2014-03-25 10:57:07

基于手持終端設(shè)備中軟件通信架構(gòu)的應(yīng)用

河南科技(2014年1期)2014-02-27 14:04:05

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

消費(fèi)導(dǎo)刊的其它文章

中國(guó)輕工業(yè)聯(lián)合會(huì)組織召開(kāi)寧波“中國(guó)文具之都” 線上復(fù)評(píng)工作會(huì)議

第九屆中國(guó)白酒T9峰會(huì)在貴州茅臺(tái)鎮(zhèn)召開(kāi)

“營(yíng)改增”對(duì)電力工程會(huì)計(jì)核算的影響分析

解讀金融政策法規(guī)對(duì)我國(guó)銀行保險(xiǎn)市場(chǎng)的影響

遼寧省三級(jí)公立醫(yī)院負(fù)債現(xiàn)狀及原因分析

基于業(yè)財(cái)融合背景下的應(yīng)用型本科財(cái)務(wù)會(huì)計(jì)課程改革研究

404 Not Found

---

nginx

關(guān)于參考網(wǎng)