跨平臺的多終端設備網頁自適應布局研究及應用*——以農民工技能培訓與綜合服務平臺為例

劉清堂 胡 艦 翟利利 黃景修

（華中師范大學 教育信息技術學院，湖北武漢430079）

引言

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

現有的跨平臺響應式布局技術存在以下問題：

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

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

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

一 Flexbox彈性盒子模型及特征

1 彈性盒子模型理論

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

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

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

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

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

圖1 Flex布局思想[4]

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

二 基于Flexbox的響應式布局設計

響應式Web設計（Response Web Design）是由Ethan Marcotte[6]提出的，其實質是針對任意設備對網頁內容進行完美布局的一種顯示機制。

基于Flexbox的響應式布局設計思路如下：首先繪制出客戶端分辨率適配表，以此作為網頁布局中部分元素大小的參照標準；然后制作出網頁整體布局原型；最后運用Flexbox+Media Queries技術實現響應式布局。

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

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

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

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

第一步：統計用戶不同平臺的終端設備的主流分辨率和對應屏幕大小

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

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

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

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

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

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

表1 客戶端分辨率適配表

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

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

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

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

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

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

第二步：制作線框原型

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

圖3 農民工技能培訓與綜合服務平臺的PC、平板電腦、智能手機端網頁布局線框原型

3 頁面局部元素響應式布局方法

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

（1）HTML結構

圖4 圖文混排模塊的HTML結構

為了結構的清晰，這個示例僅使用了簡單的HTML結構，實際開發中標簽中間還需添加圖片和文字標簽。

（2）CSS代碼

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

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

（3）Media Queries條件[9]

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

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

（4）示例效果

運用HTML5+CSS3，并結合Flexbox+Media Queries技術，使圖文混排模塊實現以下效果。

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

三 跨平臺的多終端設備網頁自適應布局應用

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

下面是Responsinator和Responsivator工具對本系統的在線測試結果。

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

圖8 測試效果圖

圖9 測試效果圖

四 總結

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

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

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

[1]冉兆春.淺析對不同分辨率屏幕自動調節的網頁設計方法[J].計算機光盤軟件與應用,2013,(3):212-214.

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

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

[4]萬維網聯盟.W3C標準[OL].

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

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

[7]周俊杰.網頁視覺設計規范[OL].

[8]楊葉,陳琳,董啟標.響應式Web移動學習資源的技術實現與設計研究[J].現代教育技術,2013,23(6):107-111.

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

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