基于HTML 5+CSS3+jQuery的響應(yīng)式布局網(wǎng)頁設(shè)計

葉潮流，馬林山

(1.合肥學(xué)院 管理系，安徽 合肥 230601；2.合肥學(xué)院 圖書館，安徽 合肥 230601)

0引言

響應(yīng)式布局[1]是由WebApp開發(fā)研究發(fā)展而來的一種網(wǎng)頁布局解決方案，其目的是兼容多種終端的不同屏寬尺寸、像素比以及屏幕的旋轉(zhuǎn)取向，動態(tài)調(diào)整頁面布局(元素位置和大小)，選擇性地顯示頁面內(nèi)容，達到最佳視覺展示效果。眾所周知，網(wǎng)頁布局外在表現(xiàn)為版塊的形式美感，內(nèi)在表現(xiàn)為結(jié)構(gòu)的技術(shù)模式，外在版塊的整體美感帶來的用戶體驗[2]最終依賴于內(nèi)在結(jié)構(gòu)技術(shù)模式的實現(xiàn)。合理的網(wǎng)頁布局體現(xiàn)的是內(nèi)容和形式的統(tǒng)一、協(xié)調(diào)和均衡，能夠以清晰愉悅的視覺導(dǎo)向告知訪問者站點的主題聚焦，方便用戶快速而高效地找到自己所需要的內(nèi)容，同時還可以快速而準確地將數(shù)據(jù)信息傳遞給搜索引擎爬行。毫無疑問，響應(yīng)式布局就是通過技術(shù)優(yōu)化[3]來實現(xiàn)網(wǎng)頁跨終端適應(yīng)性以及數(shù)據(jù)搜索引擎優(yōu)化的可讀性，賦予用戶舒適的整體美感和良好的閱讀體驗。

網(wǎng)頁布局是網(wǎng)頁設(shè)計中的核心環(huán)節(jié)。以PC機為終端的網(wǎng)頁布局往往采用“國”字型、“匡”字型等版塊形式，內(nèi)在架構(gòu)普遍采用DIV+CSS2技術(shù)模式。而DIV+CSS2是基于盒狀模型的網(wǎng)頁布局解決方案，全程依賴于display、position和 float等屬性的設(shè)置，網(wǎng)頁寬度是一種可量取、可控制，以像素為度量單位的固定布局方案。當分辨率為800px×600px時，網(wǎng)頁寬度約定為778px以內(nèi)，高度由布局和內(nèi)容決定；而當分辨率為1024px×768px時，網(wǎng)頁寬度控制為1002px以內(nèi)，高度控制在612～615px之間，以避免出現(xiàn)滾動條。然而，伴隨著移動互聯(lián)網(wǎng)的飛速發(fā)展和移動終端的普及與應(yīng)用，用戶上網(wǎng)方式發(fā)生了巨大變化，越來越多的人選擇了智能手機和iPad一類的平板設(shè)備來瀏覽頁面。移動終端設(shè)備分辨率千差萬別，分辨率極小值為320px，極大值已達2560px，甚至更高。以PC機為基準的固定布局式網(wǎng)頁一旦遷移到移動終端時，往往出現(xiàn)頁面雜亂不堪，造成用戶閱讀困難，難以聚焦信息內(nèi)容。由此可見，基于傳統(tǒng)的網(wǎng)頁布局無法兼容和感知移動終端的視口尺寸[4]和旋轉(zhuǎn)取向，違背了移動互聯(lián)用戶無障礙獲取信息的初衷。

針對移動用戶體驗不足的問題，一些資金和技術(shù)雄厚的門戶網(wǎng)站，使用自適應(yīng)布局[5-6]技術(shù)為移動設(shè)備量身定制多個網(wǎng)頁版本，解決了在分辨率不同的設(shè)備上如何顯示相同頁面的問題，但由此出現(xiàn)了多版本的維護成本劇增和網(wǎng)站多入口(portal)的架構(gòu)設(shè)計難度以及小屏幕上查看內(nèi)容太多時的擁擠現(xiàn)象。于是，“一次設(shè)計，普遍適用”的“響應(yīng)式布局”設(shè)計理念應(yīng)運而生，并得到了網(wǎng)頁設(shè)計師和專家學(xué)者的狂熱式追捧和擴散式關(guān)注。與此同時，以谷歌為代表的瀏覽器廠商紛紛加入響應(yīng)式布局技術(shù)的開發(fā)行列，加速響應(yīng)式布局概念的拓展和延伸，融合了自適應(yīng)布局和流體布局[7]的理念，迭代出彈性布局[8]理念，而且涵蓋內(nèi)容更多,增加了響應(yīng)式圖片[9]和響應(yīng)式文字等響應(yīng)式內(nèi)容。作為新一代的跨平臺技術(shù)的HTML 5集成了響應(yīng)式布局理念，很好地解決了移動設(shè)備屏寬的“自動設(shè)別”和網(wǎng)頁布局的智能調(diào)整以及搜索引擎的精確抓取。輔助 CSS3技術(shù)支持的Web應(yīng)用實現(xiàn)了網(wǎng)頁在不同終端之間的自由切換和平滑過渡[10]，為移動用戶提供了舒適的呈現(xiàn)界面和良好的用戶體驗。融合jQuery技術(shù)支持的Web元素很好地實現(xiàn)本地人機交互功能，加強了響應(yīng)式布局網(wǎng)頁的用戶體驗。

1 HTML5技術(shù)優(yōu)勢

以期能在“開放Web平臺”的互聯(lián)網(wǎng)應(yīng)用領(lǐng)域，為桌面和移動平臺帶來無縫銜接的統(tǒng)一標準,萬維網(wǎng)聯(lián)盟(W3C,World Wide Web Consortium)歷經(jīng)8年的艱辛努力，終于在2014年10月29日完成并發(fā)布HTML5標準規(guī)范。HTML 5標準廣義上是三種技術(shù)組合的網(wǎng)絡(luò)應(yīng)用標準集：涵蓋HTML5、CSS3和JavaScript，使得“豐富性網(wǎng)絡(luò)應(yīng)用服務(wù)”不再依賴于瀏覽器的插件支持。

HTML5是緊隨HTML4.01之后的升級版，但不局限于HTML規(guī)范的簡單升級，而是一次重要的功能突破。HTML5的出現(xiàn)具有劃時代意義，它將HTML技術(shù)從單純的標記語言轉(zhuǎn)變?yōu)槿碌腤eb應(yīng)用開發(fā)框架和平臺，著力解決當下Web開發(fā)中存在的諸多問題。

1.1 結(jié)構(gòu)元素的語義化

與前一版本HTML4相比，HTML5的優(yōu)勢集中體現(xiàn)在良好的語義特性[11]，新增了一些與頁眉、頁腳、導(dǎo)航、內(nèi)容區(qū)塊等有關(guān)的文檔結(jié)構(gòu)元素，從而使得網(wǎng)頁布局無需CSS的支持。語義化結(jié)構(gòu)元素的使用也可使得網(wǎng)頁整體結(jié)構(gòu)更加直觀和清晰明確。經(jīng)典的圣杯布局[12]經(jīng)過HTML5技術(shù)重構(gòu)后，其文檔結(jié)構(gòu)語義一目了然。

…

由此可見，語義化結(jié)構(gòu)標記的引入不僅使得網(wǎng)頁代碼編寫化繁為簡，輕松地實現(xiàn)了文檔結(jié)構(gòu)及其信息語義化，還使得眾多搜索引擎和屏幕閱讀器能輕松地理解、抓取和識別網(wǎng)頁內(nèi)容及網(wǎng)頁層次關(guān)系。

除此以外，HTML5還提升了表單的智能化功能，增加了多媒體播放和控制元素(audio和video)和擴展功能元素(畫布Canvas API、地理定位Geolocation API、索引數(shù)據(jù)庫IndexedDB)?？梢哉f，HTML 5的出現(xiàn)標識Web前端開發(fā)進入了一個新時代。

1.2視口元素的感知力

在響應(yīng)式布局設(shè)計中，視口(viewport)是一個非常重要的概念，用于描述瀏覽器解析網(wǎng)頁時的內(nèi)容顯示區(qū)域。針對移動端瀏覽器而言，ppk將viewport分為三種[13-15]，一種是可視視口(visual viewport)，等價于設(shè)備屏寬大??；另一種是layout viewport(布局視口)，等價于網(wǎng)頁設(shè)計布局大小，也是瀏覽器解析網(wǎng)頁時的首選視口，通常大于可視視口；第三種是理想視口(ideal viewport)，等價于網(wǎng)頁跨終端顯示時的自動匹配視口，理想視口的意義在于網(wǎng)頁布局的跨終端性和自適應(yīng)性。在沒有橫向滾動條的情況下，即使沒有手動縮放，理想視口的網(wǎng)頁也能完美地呈現(xiàn)給用戶。為了解決網(wǎng)頁布局的跨終端和自適應(yīng)性，HTML5技術(shù)提供名為viewport的meta元素，使得網(wǎng)頁具備了設(shè)備感知能力，從而解決了移動終端的屏寬尺寸兼容性問題。其通用代碼如下：

上述代碼中，width用于控制布局視口，當width = device-width時，則表示viewport寬度取值理想視口；initial-scale= 1.0用于控制初始縮放比例，其值為 1.0 時也表示viewport寬度取值理想視口。二者聯(lián)合應(yīng)用的原因是在解析網(wǎng)頁布局時，部分終端設(shè)備(iphone、ipad)和IE瀏覽器均存在不同程度的橫豎屏不分的小缺陷。其中，width = device-width解決了IE的毛病，initial-scale =1.0以豎屏寬度為基準，從而解決了Iphone和Ipad等設(shè)備的顯示故障。user-scalable用戶控制是否允許用戶進行縮放。maximum-scale用于控制最大縮放比例。

1.3響應(yīng)式圖片[16]的自適應(yīng)

響應(yīng)式圖片是指根據(jù)屏幕尺寸和應(yīng)用場景選擇合適的圖片，以適應(yīng)上下文視覺的審美體驗。響應(yīng)式圖片的解決方案有兩種：分辨率切換和藝術(shù)指導(dǎo)。分辨率切換是比較普遍的方式，適用于保留圖片內(nèi)容和寬高比，同時允許改變圖片分辨率的情形，俗稱同一圖片的不同版本，如圖1所示；藝術(shù)指導(dǎo)適用于需要改變圖片的內(nèi)容和寬高比例時的場景，即不同視口映射不同圖片，如下頁圖2所示。

圖1 分辨率切換

圖2 藝術(shù)指導(dǎo)

1.3.1 分辨率切換

上述代碼中，src屬性描述瀏覽器不支持srcset屬性時顯示的圖片；srcset屬性是一個包含兩個值(圖片資源，視口寬度)的圖片資源列表描述項目，提醒瀏覽器該圖片寬度的大致規(guī)格(px)，其中w是描述寬度度量標識符；sizes屬性則是一組包含媒體條件、源圖寬度的屬性值集合項目，專門用來描述特定媒體條件下的圖片寬度限制，其中vw(1% viewport width，視口寬度的1%)是當視口寬度取值單位為w時，源圖寬度唯一可用的單位。

與此類似的還有vh(1% viewport height，視口高度的1%)、 vmin(視口寬度、高度中較小值的1%)、vmax(視口寬度、高度中較大值的1%)。

1.3.2 藝術(shù)指導(dǎo)

分辨率切換雖然解決了單一圖片源的缺陷，但是沒有解決圖片主體和全景的視覺適應(yīng)性，即小屏幕時放大圖片的主體部分，大屏幕時顯示圖片的全景信息。在插件Picturefill[17]的配合下，HTML5新增的元素可以實現(xiàn)不同視口分別顯示不同場景的圖片，相關(guān)代碼舉例如下：

上述代碼中，source標記是描述圖片資源列表，其中media屬性是指定圖片的屏寬響應(yīng)范圍，srcset屬性則是指定圖片的名稱及其文件夾；而img標記及其屬性則用來是解決瀏覽器的兼容性問題，默認是不顯示的，只在瀏覽器不支持picture時候才會顯示。

2 CSS3技術(shù)優(yōu)勢

CSS是將網(wǎng)頁內(nèi)容與樣式實行分離的一種標記語言，使得HTML語言單純描述信息內(nèi)容，并能更好地適應(yīng)CSS樣式的美工設(shè)計。其基本原理是通過選擇器、屬性和屬性值的樣式組合來精確控制網(wǎng)頁布局、背景、字體等表現(xiàn)效果。

CSS3是CSS2技術(shù)的升級版，它提供了更加豐富且實用的規(guī)范，以模塊化設(shè)計方式對CSS功能進行重組，劃分成若干個相互獨立的模塊，有助于厘清各模塊之間的關(guān)系，減少完整文件的存儲空間。在不犧牲性能和語義結(jié)構(gòu)的前提下，CSS3提供了更多風(fēng)格和更強特性。此外CSS3新增了彈性盒子布局、多欄布局、邊框、動畫效果等模塊，有利于網(wǎng)站的開發(fā)和維護，提升了代碼編寫效率。在Web開發(fā)中，使用CSS3技術(shù)將會在頁面美化、動畫創(chuàng)作等方面顯著地提高用戶體驗，同時有助于應(yīng)用程序的智能感知設(shè)備的視口差異性。響應(yīng)式設(shè)計就是通過CSS3的媒體查詢、彈性布局模式來實現(xiàn)元素在盒子中的分布方式和空間位置更加靈活，從而達到網(wǎng)頁視口的自適應(yīng)和圖片、文字等內(nèi)容大小的自我調(diào)整。

2.1 媒體查詢的邏輯性

媒體查詢是CSS3的一項關(guān)鍵技術(shù)，可以為Web頁面設(shè)置不同的視口樣式，實現(xiàn)頁面跨平臺的渲染效果。在CSS3規(guī)范中，媒體查詢通過媒體類型、媒體特性表達式(視口屏寬、設(shè)備方向)等參數(shù)自動調(diào)整頁面呈現(xiàn)方式，其通用代碼如下：

@media mediatype and|not|only (media feature){property：value;}

上述代碼中，mediatype 取值可以是all(所有類型終端)、screen(屏幕)、print(打印機)和speech(屏幕閱讀器)，screen是媒體類型缺省值，因而網(wǎng)頁設(shè)計通常省略mediatype子句，簡化為@media (media feature){ property：value;}形式；and、not和only是關(guān)系運算符，分別表示合并、排除、特指的媒體特性；media feature是由min-width 或者 max-width和斷點[18]組成的媒體特性表達式。

斷點是網(wǎng)頁布局及其內(nèi)容和樣式發(fā)生變化的臨界點，往往由終端設(shè)備視口屏寬大小來決定。由于終端設(shè)備視口的屏寬大小不一、數(shù)不勝數(shù)，因而為所有終端設(shè)置斷點既費時費力又沒有意義。常見的辦法是依據(jù)主流終端設(shè)備的視口屏寬劃分斷點，然后有選擇性地編寫3～5個斷點的媒體查詢代碼。一般斷點如下：

//屏寬大于等于480px時應(yīng)用

@media (min-width: 480px) {}

//小屏幕大于等于768px時應(yīng)用，如平板

@media (min-width: 768px) {}

//中等屏幕大于等于992px時應(yīng)用，如普通桌面顯示器

@media (min-width: 992px) {}

//大屏幕大于等于1200px時應(yīng)用，如超大桌面顯示器

@media (min-width: 1200px) {}

2.2彈性布局的智能化

彈性布局(Flexbox Layout)是一種突破方向限制的柔性流體布局機制(display:flex;)，且具有改變伸縮性子項目(flex item)空間大小，以最佳效果填滿伸縮性父容器(flex container)可用空間的彈性計算能力。這種計算能力使得彈性布局可以簡便地、完整地、響應(yīng)式地自由匹配各種媒體查詢斷點，從而實現(xiàn)不同頁面布局之間的自由切換和平滑漸變?？梢哉f，彈性布局是響應(yīng)式布局的靈魂所在，開啟了網(wǎng)頁布局的一種智能化模式，同時也解決了網(wǎng)頁設(shè)計中一些存在多年的困擾，如方向性、居中對齊等布局問題。

2.2.1彈性盒模型

彈性布局是基于彈性盒模型的，是對盒裝模型(DIV+CSS2)的一種改進，盒內(nèi)元素不再使用float、clear和vertical-align屬性。整個彈性盒模型劃分為伸縮父容器、伸縮子項目、主軸(main axis)和交叉軸(cross axis)4部分，如圖3所示。彈性盒模型提供了兩組屬性集，分別用來控制父容器和子項目的伸縮、方向、對齊和次序，以實現(xiàn)彈性布局的智能化布局理念，如表1和表2所示。

圖3 彈性盒模型[19]

屬性描述flex-direction(主軸方向)row | row-reverse |column| column-reverse(水平向右|水平向左|垂直向下|垂直向上)flex-wrap(主軸上子項目的換行)nowrap|wrap|wrap-reverse(不換行|換行|反向換行)flex-flow(彈性流)flex-direction和flex-wrap的復(fù)合屬性justify-content(主軸上子項目的對齊)flex-start|flex-end|center|space-between|space-around(起點對齊|終點對齊|居中對齊|平均分布|平均分布,起點終點留白)align-items(交叉軸上子項目的對齊)stretch|flex-start|flex-end|center|baseline(伸縮填滿|起點對齊|終點對齊|居中對齊|基線對齊)align-content(多主軸在交叉軸上的對齊)stretch|flex-start|flex-end|center|space-between|space-around(同上)

表2 子項目屬性及其取值說明

2.2.2 彈性計算

彈性布局的靈活性得益于其“伸縮性”，這種伸縮性主要是通過父容器的伸縮性(display:flex;)來控制子項目的伸縮性(flex: flex-grow flex-shrink flex-basis屬性的綜合應(yīng)用)。子項目伸縮性計算過程包括擴展空間和收縮空間兩個過程[20-21]。

第一，擴展空間計算過程。

當父容器空間大于所有子項目空間總和時，各子項目可通過擴展(flex-grow)方式占用父容器多余空間，從而填滿父容器空間，其計算過程如下：

step1 首先計算剩余空間：父容器空間(width)減去所有相鄰子項目初始空間(flex-basis)的總和；

剩余空間=父容器width-所有相鄰子項目flex-basis的總和

圖4 計算剩余空間示意圖

step2 然后計算剩余空間的等額空間：將剩余空間按照所有相鄰子項目flex-grow的總和均勻劃分；

等額空間 = 剩余空間/所有相鄰項目flex-grow的總和

圖5 計算等額空間示意圖

step3 最后計算各子項目擴展后的空間：擴展因子與等額空間相乘后加上初始空間。

子項目擴展后的空間 =初始空間(flex-basis) + 等額空間 x flex-grow值

圖6 計算擴展空間示意圖

第二，收縮空間的計算過程。

當父容器空間小于所有子項目空間總和時，各子項目可通過收縮(flex-shrink)自身空間的方式，從而阻止父容器溢出空間，假定有父容器(width: 300px;)和子項目A、B、C 3個，flex-basis取值分別為100px、 200px、200px，其flex-shrink取值分別1、2、3，則其計算過程如下：

Step1 計算父容器溢出空間：由所有相鄰子項目的初始空間總和減去父容器空間得到；

溢出空間=(100+200+200)-300=200

圖7 溢出空間示意圖

Step2 計算所有相鄰子項目的線性加權(quán)之和：子項目與之收縮因子乘積的累加；

線性加權(quán)之和= (1×100) + (2×200) + (3×200) = 1100

Step3 計算各子項目的收縮權(quán)重：將子項目與之收縮因子的乘積除以線性加權(quán)之和,依次得到各子項目的權(quán)重；

A的權(quán)重：(1×100)/1100=0.09091;

B的權(quán)重：(2×200)/1100=0.36364;

C的權(quán)重：(3×200)/1100=0.54545;

Step4 計算各子項目的收縮空間：子項目的各自權(quán)重與溢出空間的乘積得到各自的收縮空間。

A的收縮空間：0.09091×200=18.182

B的收縮空間：0.36364×200=72.727

C的收縮空間：0.54545×200=109.091

Step5 計算各子項目的最終空間，初始空間減去收縮空間。

A的最終空間：100-18.182=81.818

B的最終空間：200-72.727=127.273

C的最終空間：200-109.091=99.909

圖8 收縮空間示意圖

2.3 響應(yīng)式文字的靈活性[22-23]

響應(yīng)式文字是指字體大小以根元素(HTML)字體基數(shù)為基準，能夠在一定范圍內(nèi)依據(jù)設(shè)備尺寸等比例縮放，從而實現(xiàn)大屏幕加大字體尺寸和小屏幕縮小字體尺寸。

為了實現(xiàn)不同視口之間的字體大小精確平滑變換，CSS3引入了相對單位rem，W3C標準規(guī)定1rem等價于根元素字體大小(font size of the root element)，由于瀏覽器字體大小基數(shù)默認值都是16px，為了便于響應(yīng)式字體計算方便，一般需要用重置根元素字體大小基數(shù)為html{font-size:62.5%;}，即設(shè)置根元素字體基數(shù)為10px。響應(yīng)式文字設(shè)計步驟如下：

Step1 重置根元素HTML字體基數(shù);

html{font-size:62.5%;//10÷16=62.5%}

Step2 確定字體極值；

article{font-size:1rem;//極小值字體大小}

@media(min-width:1200px){

article{font-size:2rem; //極大值字體大小}

}

Step3 設(shè)置媒體查詢斷點極值(位于字體極值代碼行間)；

@media(min-width:320px) and (max-width: 1200px){//響應(yīng)式字體實現(xiàn)代碼;}

Step4 實現(xiàn)響應(yīng)式字體大小精確平滑變換;

article{

font-size:calc(1rem+(2-1)*(100vw-320px)/(1200-320)); //100vw-320px表示屏寬度減去最小寬度的值}

3 jQuery技術(shù)優(yōu)勢

作為JavaScript的子集，jQuery是一種快捷小巧的、功能豐富的輕型腳本庫，其主要功能是遍歷和操作HTML元素，實現(xiàn)對頁面元素的控制和特效設(shè)置。

在響應(yīng)式布局網(wǎng)頁設(shè)計時，響應(yīng)式導(dǎo)航欄通常需要jQuery技術(shù)輔助實現(xiàn)導(dǎo)航欄的收縮和擴展。當屏幕足夠?qū)挄r，顯示所有導(dǎo)航菜單，如圖9所示；一旦屏幕寬度小于設(shè)定值(480px)時，導(dǎo)航欄主體菜單隱藏，呈現(xiàn)收縮狀態(tài)，如圖10所示；此時，單擊系統(tǒng)按鈕Ξ后，導(dǎo)航菜單以下拉式菜單彈出，如圖11所示。

圖9導(dǎo)航欄全局示意圖

圖10導(dǎo)航欄收縮示意圖

圖11 導(dǎo)航欄彈出后示意圖

3.1 導(dǎo)航欄的HTML5代碼

3.2 JQuery腳本控制代碼

3.3 關(guān)鍵性CSS3代碼

nav a#menuPull {

display:flex;

flex-direction: row;

justify-content: flex-end;

background: #1a54a4;

font-weight: bold;

font-size: 2rem;

font-family: arial, fantasy;

padding: 0 0.5rem;}

nav a#menuPull::before {

content:"合肥學(xué)院";

font-size: 1.6rem;

width: 8rem;

height:2rem;

padding: 0.15rem 0.5rem;

position: absolute;

top: 0;

left: 0.5rem;}

@media only screen and (min-width : 480px){

……

nav a#menuPull {

display:none; }

}

4 仿真實驗

為了驗證本文所提技術(shù)的可行性，使用本文技術(shù)對圣杯布局進行重構(gòu)，并完成了響應(yīng)式布局設(shè)計驗證。實驗環(huán)境選擇Xamp服務(wù)器，編輯開發(fā)工具選擇JetBrains WebStorm 11.0.3，運行瀏覽器選擇Google Chrome，考慮到目前瀏覽器普遍支持CSS 3，編寫CSS 3代碼時無須添加瀏覽器私有前綴符-webkit-。

4.1 實驗流程

首要任務(wù)是對圣杯布局進行響應(yīng)式原型設(shè)計，需要考慮到盡可能多的終端設(shè)備顯示視口，包括最小的寬度和最大寬度的兼容性以及不同寬度的合理比例以及各元素的位置、大小。其中兩個極值的原型圖，如圖12所示。

圖12 響應(yīng)式布局示意圖

其次是遵循HTML5語言語法規(guī)則將原型結(jié)構(gòu)語義化，通常需要將DIV+CSS2等固定布局中描述結(jié)構(gòu)的ID屬性給予語義化，轉(zhuǎn)換成HTML5語義化結(jié)構(gòu)標記。

再次，在遵循HTML5+CSS3工作原理的情況下，為各標記編寫CSS3代碼，實現(xiàn)響應(yīng)式布局設(shè)計。關(guān)鍵代碼如下：

header,#main,footer{

display:flex; flex-flow:row wrap;}

#main>article{ order:1;flex:1 100%;}

#main>nav{ order:2;flex:1 100%; }

#main>aside{ order:3;flex:1 100%; }

header{background:tomato}

footer{background:lightgreen}

article{ background:deepskyblue}

nav{background:gold}

aside{background:hotpink}

@media all and (min-width:480px){

#main>nav{ flex:1 auto; }

#main>aside{ flex:1 auto; }

}

@media all and (min-width:768px){

#main>nav{

order:1; flex:1 auto;}

#main>article{

order:2; flex:2 auto;}

#main>aside{

order:3;flex:1 auto;}

}

最后，根據(jù)需要在文檔結(jié)構(gòu)中添加其他元素，直至最終完成整個網(wǎng)頁設(shè)計。

4.2實驗分析及注意事項

通過實驗得知，本文算法能夠適應(yīng)移動終端設(shè)備屏幕分辨率的千差萬別，同時滿足了用戶體驗的審美愉悅性。此外，為了滿足圖片和文字的響應(yīng)式布局效果，實際應(yīng)用還需要注意以下幾點。

第一，使用相對單位，放棄像素(px)單位。推薦使用em、rem和百分比(%)單位來限定布局元素，如此可以根據(jù)客戶端分辨率的大小來進行合理的顯示。固定寬度轉(zhuǎn)換為百分比寬度的計算公式：百分比寬度 = 子元素寬度 / 父容器元素寬度。

第二，為圖片(img)、視頻(video)等多媒體元素設(shè)置max-width:100% 和height:auto，可讓圖片、視頻按比例縮放，自動填滿父容器。

img,video,embed{

max-width:100%;

height:auto；}

第三，注意斷點順序。無論是移動優(yōu)先還是臺式桌面優(yōu)先，編寫代碼和顯示效果區(qū)別不大。但是，移動優(yōu)先會帶來一些額外限制，有助于理解斷點大小關(guān)系。

第四，嵌套實現(xiàn)圖文混排效果。通過雙重DIV標記實現(xiàn)外層彈性布局，內(nèi)層圖文混排效果，如圖13所示。

.outer {

display: flex; flex-flow: row wrap;

padding-right: 10px;

width: 50vw; border:solid 1px blue; }

img{

margin:10px 10px 5px;

max-width: 30vw; height: auto;

float: left; //混排效果 }

圖13 圖文混排局示意圖

4 結(jié)論

通過驗證實驗可知，HTML5引入了一些新元素，將使得網(wǎng)頁更合乎語義化標準，使得眾多瀏覽器能夠完美地呈現(xiàn)網(wǎng)頁，并能改善移動終端和搜索引擎的用戶體驗。CSS 3提供的媒體查詢功能實現(xiàn)了網(wǎng)頁在智能手機和平板等多種終端設(shè)備之間的平滑過渡和自由遷移，智能化切換分辨率和圖片尺寸，避免了頁面變形。輔助JS技術(shù)可以更好地實現(xiàn)響應(yīng)式布局中一些元素智能控制功能，從而為不同終端的用戶提供更加舒適的界面和更好的用戶體驗。最后為了讓用戶有一個更完美的體驗，對通過圣杯布局的代碼重構(gòu)，達到了本次實踐成果，成功地展示響應(yīng)式布局網(wǎng)頁設(shè)計的方案優(yōu)化。