響應(yīng)式布局網(wǎng)頁(yè)的設(shè)計(jì)與實(shí)現(xiàn)

梁敦毫

(廣東茂名幼兒師范專(zhuān)科學(xué)校，廣東茂名 525000)

0 引言

近年來(lái)，隨著移動(dòng)互聯(lián)網(wǎng)的高速發(fā)展，移動(dòng)互聯(lián)網(wǎng)用戶的數(shù)量已經(jīng)遠(yuǎn)遠(yuǎn)超過(guò)了PC端用戶，由于移動(dòng)設(shè)備使用便捷，越來(lái)越多的人喜歡通過(guò)手機(jī)、平板等移動(dòng)設(shè)備來(lái)訪問(wèn)網(wǎng)絡(luò)，例如，當(dāng)想查看某學(xué)校官網(wǎng)時(shí)，用戶可能會(huì)通過(guò)手機(jī)登陸，如果打開(kāi)的網(wǎng)站排版混亂、字體太小、滾動(dòng)條很長(zhǎng)等情況，不僅用戶體驗(yàn)差，網(wǎng)站也達(dá)不到宣傳的效果?，F(xiàn)在，大部分的網(wǎng)站都逐步往風(fēng)格一致而且兼容不同的設(shè)備的方向發(fā)展，響應(yīng)式布局就順應(yīng)而生。響應(yīng)式布局是指通過(guò)一套代碼使網(wǎng)頁(yè)內(nèi)容能根據(jù)設(shè)備的不同尺寸良好的呈現(xiàn)不一樣的效果，從而提高用戶的體驗(yàn)。

1 技術(shù)介紹

1.1 響應(yīng)式布局

響應(yīng)式布局是指一個(gè)網(wǎng)站能夠兼容不同的終端設(shè)備，而不需要為每個(gè)終端設(shè)備設(shè)計(jì)一個(gè)特定版本。響應(yīng)式布局能根據(jù)不同的終端，呈現(xiàn)不同的顯示效果，為用戶帶來(lái)更好舒適的界面和更好的用戶體驗(yàn)。

1.2 HTML5+CSS3

HTML5是最新的Web標(biāo)準(zhǔn)，在原有的HTML4基礎(chǔ)上增加了一些新的標(biāo)簽和JavaScript接口，其中定義了很多語(yǔ)義化的標(biāo)簽，如：header、footer、nav、main等，這些標(biāo)簽給網(wǎng)頁(yè)的布局帶來(lái)了很大的便利。

CSS3是CSS(層疊樣式表)的最新版本，它在原有的CSS2.0的版本上增加了許多新的特性，例如，多列布局和彈性盒模型布局特性、媒體查詢特性等，其中，彈性盒模型布局方便了Web前端開(kāi)發(fā)者根據(jù)復(fù)雜的前端分辨率進(jìn)行彈性布局，輕松地實(shí)現(xiàn)頁(yè)面中的某一區(qū)塊在水平、垂直方向?qū)R，是進(jìn)行響應(yīng)式網(wǎng)站開(kāi)發(fā)的一大利器[1]。媒體查詢能根據(jù)不同的分辨率的終端設(shè)備，定義不同的樣式。

1.3 Bootstrap

Bootstrap是美國(guó)Twitter公司的設(shè)計(jì)師Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript開(kāi)發(fā)的簡(jiǎn)潔、直觀、強(qiáng)悍的前端開(kāi)發(fā)框架，使得Web開(kāi)發(fā)更加快捷[2]。Bootstrap提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng)，隨著屏幕或視口(viewport)尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列[3]。

2 響應(yīng)式布局頁(yè)面的設(shè)計(jì)與實(shí)現(xiàn)

2.1 媒體查詢實(shí)現(xiàn)響應(yīng)式布局

設(shè)計(jì)網(wǎng)頁(yè)布局的實(shí)現(xiàn)方式有很多種，但是主流的設(shè)計(jì)方式是DIV+CSS，這種方式結(jié)構(gòu)代碼簡(jiǎn)單，可以輕松的實(shí)現(xiàn)內(nèi)容與表現(xiàn)相分離，提高網(wǎng)頁(yè)的加載速度，特別是在HTML5中增加了