劉清堂 胡 艦 翟利利 黃景修

（華中師范大學(xué) 教育信息技術(shù)學(xué)院，湖北武漢430079）

引言

隨著互聯(lián)網(wǎng)技術(shù)的迅猛發(fā)展，互聯(lián)網(wǎng)終端設(shè)備從個人電腦到平板電腦、智能手機，平臺越來越多，瀏覽器的屏幕尺寸千差萬別[1]。這種情況給網(wǎng)頁開發(fā)者提出了更高的要求，同樣的內(nèi)容，要在平臺不同、大小迥異的屏幕上都擁有很好的用戶體驗并非易事。

現(xiàn)有的跨平臺響應(yīng)式布局技術(shù)存在以下問題：

（1）布局基于塊（從上到下）和內(nèi)聯(lián)流（從左到右）方向，針對大型或者復(fù)雜的應(yīng)用程序（特別是當(dāng)它涉及到取向改變、縮放、拉伸和收縮等）就缺乏靈活性；

（2）容器只能讓其子項目改變寬度與高度，不能改變順序，因此無法以最佳方式填充可用空間，造成有限空間的浪費。

針對已有響應(yīng)式布局技術(shù)存在的問題，本文提出一種新的跨平臺響應(yīng)式布局模式，并繪制出較為合理的客戶端分辨率適配表，探討了面向多終端設(shè)備的網(wǎng)頁自適應(yīng)布局解決方案。文章首先概述了彈性盒子模型及特征；其次梳理了基于Flexbox的響應(yīng)式布局的設(shè)計流程；最后以“農(nóng)民工技能培訓(xùn)與綜合服務(wù)平臺”為例來驗證Flexbox的響應(yīng)式布局效果。

一 Flexbox彈性盒子模型及特征

1 彈性盒子模型理論

盒子模型（Box Model）是級聯(lián)樣式表（Cascading Style Sheet，CSS）的核心，其屬性包括：內(nèi)容（content）、填充（padding）、邊框（border）、邊界（margin）[2]。盒子模型有兩種類型，分別是IE盒子模型和標(biāo)準(zhǔn)W3C（瀏覽器內(nèi)核為WebKit）盒子模型，目前移動設(shè)備上的瀏覽器內(nèi)核均為WebKit。

W3C在CSS3（CSS的第三個版本）中引入了新的盒子模型——彈性盒子模型（Flexible Box Model），該模型采用新的布局機制。這種機制與傳統(tǒng)的CSS盒子模型布局有很大的區(qū)別：CSS盒子模型布局通過內(nèi)容決定父容器大小，而CSS3彈性盒子模型布局在指定大小的父盒子里來為子盒子分配空間[3]。

2 彈性盒子模型實例“Flexbox”特征

Flexbox由伸縮容器（父元素）和伸縮項目（子元素）組成。通過設(shè)置元素的display屬性為flex或inline-flex可以得到一個伸縮容器，伸縮容器中的每一個子元素都是一個伸縮項目。

常規(guī)布局是基于塊和內(nèi)聯(lián)流方向，而Flex布局是基于flex-flow流。來自W3C規(guī)范中的這張圖，解釋了Flex布局的主要思想。

圖1 Flex布局思想[4]

如圖1所示，F(xiàn)lex布局主要思想是讓容器有能力讓其子項目能夠改變其寬度、高度(甚至順序)，以最佳方式填充可用空間（主要是為了適應(yīng)所有類型的顯示設(shè)備和屏幕大?。lex容器會使子項目（伸縮項目）擴展來填滿可用空間，或縮小他們以防止溢出容器[5]?；旧希炜s項目是沿著主軸（main axis），從主軸起點（main-start）到主軸終點（main-end）或者沿著側(cè)軸（cross axis），從側(cè)軸起點（cross-start）到側(cè)軸終點（cross-end）排列。根據(jù)伸縮項目排列方式不同，主軸和側(cè)軸方向也有所變化。

二 基于Flexbox的響應(yīng)式布局設(shè)計

響應(yīng)式Web設(shè)計（Response Web Design）是由Ethan Marcotte[6]提出的，其實質(zhì)是針對任意設(shè)備對網(wǎng)頁內(nèi)容進(jìn)行完美布局的一種顯示機制。

基于Flexbox的響應(yīng)式布局設(shè)計思路如下：首先繪制出客戶端分辨率適配表，以此作為網(wǎng)頁布局中部分元素大小的參照標(biāo)準(zhǔn)；然后制作出網(wǎng)頁整體布局原型；最后運用Flexbox+Media Queries技術(shù)實現(xiàn)響應(yīng)式布局。

1 面向多類型終端的分辨率適配方法

客戶端分辨率適配，其核心在于計算出不同顯示器上擁有最好用戶體驗的一個字號大小，而Logo大小、行高、按鈕大小、圖標(biāo)尺寸、文本間距等都以該字號大小的相對比值（單位為em）來定義。該字號大小的計算方法如圖2所示：

圖2 不同分辨率下所需字號計算方法

下面，需要制作出詳細(xì)的客戶端分辨率適配表，以便后期實際開發(fā)參考。

第一步：統(tǒng)計用戶不同平臺的終端設(shè)備的主流分辨率和對應(yīng)屏幕大小

通過從CNZZ數(shù)據(jù)專家（全球最大的中文互聯(lián)網(wǎng)數(shù)據(jù)統(tǒng)計分析服務(wù)提供商）中進(jìn)行查詢，得到針對不同的分辨率其可能的屏幕尺寸范圍數(shù)值，并確定該分辨率下的主流屏幕尺寸。若某一分辨率下不同型號的屏幕尺寸分布較為平均，則通過計算屏幕尺寸的最大值和最小值的算術(shù)平均值作為主流屏幕尺寸。

第二步：計算每個分辨率主流屏幕尺寸的物理寬度

已知屏幕對角線長度、長寬分辨率，按照勾股定理，再加之單位換算關(guān)系1英寸=2.54厘米，可以很輕松地算出屏幕的物理長度和寬度。

用屏幕的物理寬度除以像素寬度，就可以得到每個像素的寬度。然后用指定的文字物理大小（正常情況下，PC終端上顯示物理寬度為4.23mm、平板電腦上顯示2.81mm、手機屏幕上顯示1.58mm見方大小的文字對于人眼來說是最舒適的）除以這個數(shù)，就可以得到在不同分辨率下所需的字號。特別提出的是：一些中文字體在非偶數(shù)字號下的顯示效果欠佳，所以針對某個屏幕分辨率，選擇離它最近的偶數(shù)字號作為最終的參考值。

第四步：根據(jù)換算對照表得到其他元素的大小

根據(jù)客戶端分辨率適配的設(shè)計原理，其他元素的大小都以這個參考量的相對比值來定義[7]。表1是最終的客戶端分辨率適配表（1—4行PC端，5、6行智能手機端，7—9行平板電腦端）：

表1 客戶端分辨率適配表

2 面向多終端設(shè)備的頁面整體布局方法

目前，響應(yīng)式Web設(shè)計并沒有通用的界面布局模型。下面按照以下流程設(shè)計出符合“農(nóng)民工技能培訓(xùn)與綜合服務(wù)平臺”其特點的頁面整體布局模型。

第一步：確定需要兼容的設(shè)備類型、屏幕尺寸

PC：17寸 1280*1024；平板電腦：8.0寸768*1024；智能手機：3.2寸 320*480。

選定設(shè)備類型及相應(yīng)屏幕尺寸后，查看客戶端分辨率適配表，確定其設(shè)備對應(yīng)的文字、Logo、圖標(biāo)、按鈕行高、文本間距等值，為制作線框原型做準(zhǔn)備。

本文提出利用再制造膠粘修復(fù)技術(shù)對工程機械中含有表面疲勞裂紋的損傷結(jié)構(gòu)進(jìn)行再制造修復(fù)。這項技術(shù)采用力學(xué)性能強的復(fù)合材料補片，通過環(huán)氧結(jié)構(gòu)的膠粘劑將補片膠粘于含有裂紋的損傷結(jié)構(gòu)表面，建立損傷結(jié)構(gòu)-膠粘劑-復(fù)合材料補片三者為一體的再制造修復(fù)結(jié)構(gòu)。再制造修復(fù)通過膠層中的膠粘界面將損傷結(jié)構(gòu)承受的一部分載荷傳遞給補片，以此緩解損傷結(jié)構(gòu)裂紋尖端的應(yīng)力集中，延緩裂紋生長，使其擴展趨勢放緩。形成再制造修復(fù)結(jié)構(gòu)以后，整體結(jié)構(gòu)強度和承載能力均獲得明顯提升，工作壽命周期得以延長。

第二步：制作線框原型

針對確定下來的幾個尺寸分別制作不同的線框原型，需要考慮清楚不同尺寸下，頁面的布局如何變化，內(nèi)容尺寸如何縮放，功能、內(nèi)容的刪減，甚至針對特殊的環(huán)境作特殊化的設(shè)計等[8]。

圖3 農(nóng)民工技能培訓(xùn)與綜合服務(wù)平臺的PC、平板電腦、智能手機端網(wǎng)頁布局線框原型

3 頁面局部元素響應(yīng)式布局方法

在完成頁面的整體布局模型后，需要對頁面各個區(qū)域中的元素進(jìn)行布局。使用彈性盒子模型，將使這方面布局工作的難度降低很多。這里以網(wǎng)頁中部的圖文混排模塊為例，展示如何運用HTML5+CSS3，并結(jié)合Flexbox+Media Queries技術(shù)實現(xiàn)響應(yīng)式Web設(shè)計。

（1）HTML結(jié)構(gòu)

圖4 圖文混排模塊的HTML結(jié)構(gòu)

為了結(jié)構(gòu)的清晰，這個示例僅使用了簡單的HTML結(jié)構(gòu)，實際開發(fā)中標(biāo)簽中間還需添加圖片和文字標(biāo)簽。

（2）CSS代碼

通過設(shè)置container的display屬性為flex，使得main標(biāo)簽成為一個伸縮容器，在伸縮容器中的所有子元素都會自動變成伸縮項目。flex-flow：row wrap表示伸縮項目排列由左向右排列且當(dāng)伸縮項目在伸縮容器中無法在一行中顯示的時候會另起一行排列。

圖5 圖文混排模塊的CSS代碼

（3）Media Queries條件[9]

圖6 圖文混排模塊的Media Queries條件

這里設(shè)置了三個響應(yīng)式斷點：窄屏、中屏和寬屏。每個斷點都有最大屏幕寬度或最小屏幕寬度的限制，具體的數(shù)值可以由開發(fā)者視情況而定。

（4）示例效果

運用HTML5+CSS3，并結(jié)合Flexbox+Media Queries技術(shù)，使圖文混排模塊實現(xiàn)以下效果。

圖7 圖文混排模塊的示例效果（按Media Queries設(shè)置的斷點順序）

三 跨平臺的多終端設(shè)備網(wǎng)頁自適應(yīng)布局應(yīng)用

“農(nóng)民工技能培訓(xùn)與綜合服務(wù)平臺”是一個為廣大農(nóng)民工提供各種專業(yè)技能培訓(xùn)的服務(wù)平臺，該平臺采用Flexbox新語法、舊語法和中間過渡語法混合使用的方式。

下面是Responsinator和Responsivator工具對本系統(tǒng)的在線測試結(jié)果。

圖8顯示的是Windows PC、IOS平板以及Android智能手機的網(wǎng)頁布局效果，可以看出三種不同平臺的終端設(shè)備對系統(tǒng)的支持度是比較高的，（左1為Windows PC、左2為IOS平板、左3為Android智能手機）；圖9顯示的是Android平臺、IOS平臺的不同屏幕尺寸的移動終端設(shè)備呈現(xiàn)出的網(wǎng)頁布局效果，可以看出同一平臺下的終端設(shè)備屏幕尺寸不同，其呈現(xiàn)的網(wǎng)頁布局也實現(xiàn)了很好的自適應(yīng)性，（左1為width=384px的Android智能手機、左2為width=600px的Android智能手機、左3為width=768px的IOS平板、左4為width=1024px的IOS平板）。

圖8 測試效果圖

圖9 測試效果圖

四 總結(jié)

本文針對已有響應(yīng)式布局技術(shù)存在的問題，提出了一種新的跨平臺響應(yīng)式布局模式，即Flexbox+Media Queries技術(shù)組合，并首次嘗試?yán)L制出較為合理的客戶端分辨率適配表。最后通過“農(nóng)民工技能培訓(xùn)與綜合服務(wù)平臺”來驗證其可行性與效果。但由于所掌握的技術(shù)程度有限，尚存在一些不足與問題，這也是在今后的研究中，應(yīng)該繼續(xù)研究的范圍。

1瀏覽器兼容性。雖然Flexbox功能強大（特別是彈性布局），但很多開發(fā)者仍然不敢使用，其主要原因出于它的語法版本眾多，瀏覽器對其兼容性情況比較復(fù)雜。若想讓瀏覽器得到完美展示，往往需要新舊語法混合使用，不僅增加了代碼數(shù)量，還提高了開發(fā)者對語法的要求。

2用戶體驗有待提高。由于開發(fā)者采用Flexbox+Media Queries技術(shù)組合來實現(xiàn)不同終端設(shè)備的網(wǎng)頁布局，因此個人電腦、智能手機、平板電腦等會呈現(xiàn)不同的網(wǎng)頁布局，這樣有可能導(dǎo)致用戶在使用過程中產(chǎn)生誤解或者操作錯誤。同時，也無法兼顧各平臺都擁有最好的用戶體驗，如手機具有屏幕小，輸入的效率限制，網(wǎng)絡(luò)傳輸速度慢等局限性[10]，但是開發(fā)者往往無法只考慮智能手機平臺的布局特點。

[1]冉兆春.淺析對不同分辨率屏幕自動調(diào)節(jié)的網(wǎng)頁設(shè)計方法[J].計算機光盤軟件與應(yīng)用,2013,(3):212-214.

[2]殷衛(wèi)莉.基于CSS盒子模型的margin屬性解析[J].揚州教育學(xué)院學(xué)報,2009,(27):28-31.

[3]林文如,林文忠,劉鐳.基于彈性盒子模型的跨平臺手機應(yīng)用界面布局[J].蘇州大學(xué)學(xué)報,2012,(5):22-26.

[4]萬維網(wǎng)聯(lián)盟.W3C標(biāo)準(zhǔn)[OL].

[5]Chris Coyier.AComplete Guide to Flexbox[OL].

[6]崔松健.響應(yīng)式Web設(shè)計[J].信息與電腦,2013,(10):25-26.

[7]周俊杰.網(wǎng)頁視覺設(shè)計規(guī)范[OL].

[8]楊葉,陳琳,董啟標(biāo).響應(yīng)式Web移動學(xué)習(xí)資源的技術(shù)實現(xiàn)與設(shè)計研究[J].現(xiàn)代教育技術(shù),2013,23(6):107-111.

[9]劉歡,盧蓓蓉.使用響應(yīng)式設(shè)計構(gòu)建高校新型門戶網(wǎng)站[J].中國教育信息化,2013,(9):71-74.

[10]馬志強,蔣曉.基于用戶體驗的智能手機網(wǎng)站界面設(shè)計探討[J].包裝工程,2012,(16):63-66.