基于HTML 5+CSS3+jQuery的響應式布局網頁設計

葉潮流，馬林山

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

0引言

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

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

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

1 HTML5技術優勢

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

HTML5是緊隨HTML4.01之后的升級版，但不局限于HTML規范的簡單升級，而是一次重要的功能突破。HTML5的出現具有劃時代意義，它將HTML技術從單純的標記語言轉變為全新的Web應用開發框架和平臺，著力解決當下Web開發中存在的諸多問題。

1.1 結構元素的語義化

與前一版本HTML4相比，HTML5的優勢集中體現在良好的語義特性[11]，新增了一些與頁眉、頁腳、導航、內容區塊等有關的文檔結構元素，從而使得網頁布局無需CSS的支持。語義化結構元素的使用也可使得網頁整體結構更加直觀和清晰明確。經典的圣杯布局[12]經過HTML5技術重構后，其文檔結構語義一目了然。

…

由此可見，語義化結構標記的引入不僅使得網頁代碼編寫化繁為簡，輕松地實現了文檔結構及其信息語義化，還使得眾多搜索引擎和屏幕閱讀器能輕松地理解、抓取和識別網頁內容及網頁層次關系。

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

1.2視口元素的感知力

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

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

1.3響應式圖片[16]的自適應

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

圖1 分辨率切換

圖2 藝術指導

1.3.1 分辨率切換

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

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

1.3.2 藝術指導

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

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

2 CSS3技術優勢

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

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

2.1 媒體查詢的邏輯性

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

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

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

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

//屏寬大于等于480px時應用

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

//小屏幕大于等于768px時應用，如平板

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

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

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

//大屏幕大于等于1200px時應用，如超大桌面顯示器

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

2.2彈性布局的智能化

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

2.2.1彈性盒模型

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

圖3 彈性盒模型[19]

屬性描述flex-direction(主軸方向)row | row-reverse |column| column-reverse(水平向右|水平向左|垂直向下|垂直向上)flex-wrap(主軸上子項目的換行)nowrap|wrap|wrap-reverse(不換行|換行|反向換行)flex-flow(彈性流)flex-direction和flex-wrap的復合屬性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屬性的綜合應用)。子項目伸縮性計算過程包括擴展空間和收縮空間兩個過程[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 計算所有相鄰子項目的線性加權之和：子項目與之收縮因子乘積的累加；

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

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

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

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

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

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

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 響應式文字的靈活性[22-23]

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

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

Step1 重置根元素HTML字體基數;

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

Step2 確定字體極值；

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

@media(min-width:1200px){

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

}

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

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

Step4 實現響應式字體大小精確平滑變換;

article{

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

3 jQuery技術優勢

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

在響應式布局網頁設計時，響應式導航欄通常需要jQuery技術輔助實現導航欄的收縮和擴展。當屏幕足夠寬時，顯示所有導航菜單，如圖9所示；一旦屏幕寬度小于設定值(480px)時，導航欄主體菜單隱藏，呈現收縮狀態，如圖10所示；此時，單擊系統按鈕Ξ后，導航菜單以下拉式菜單彈出，如圖11所示。

圖9導航欄全局示意圖

圖10導航欄收縮示意圖

圖11 導航欄彈出后示意圖

3.1 導航欄的HTML5代碼

3.2 JQuery腳本控制代碼

3.3 關鍵性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:"合肥學院";

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 仿真實驗

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

4.1 實驗流程

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

圖12 響應式布局示意圖

其次是遵循HTML5語言語法規則將原型結構語義化，通常需要將DIV+CSS2等固定布局中描述結構的ID屬性給予語義化，轉換成HTML5語義化結構標記。

再次，在遵循HTML5+CSS3工作原理的情況下，為各標記編寫CSS3代碼，實現響應式布局設計。關鍵代碼如下：

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;}

}

最后，根據需要在文檔結構中添加其他元素，直至最終完成整個網頁設計。

4.2實驗分析及注意事項

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

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

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

img,video,embed{

max-width:100%;

height:auto；}

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

第四，嵌套實現圖文混排效果。通過雙重DIV標記實現外層彈性布局，內層圖文混排效果，如圖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 結論

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