彈性盒子下的響應式網頁布局

前言：想要寫出一篇引人入勝的文章？我們特意為您整理了彈性盒子下的響應式網頁布局范文，希望能給你帶來靈感和參考，敬請閱讀。

摘要：一個良好的網頁布局，可以有效提升用戶瀏覽的舒適度，進而優化用戶體驗。而在移動互聯網時代，用戶除了使用PC端的桌面瀏覽器訪問網頁，還會使用其他各種移動終端訪問網頁。而響應式頁面布局，可以是一個網頁能夠兼容不同終端，可以為不同終端用戶提供更為舒適的界面和良好的用戶體驗?；诖耍P者將介紹基于彈性盒子模型實現響應式頁面布局的原理和思路。

關鍵詞：響應式布局；媒體查詢；彈性盒子

引言

傳統的網頁布局技術，大多是針對PC端網頁進行開發的，一般包括固定寬度布局或流式布局。固定寬度布局受限于不同瀏覽器的分辨率，在小屏幕大寬度中會在瀏覽器中出現橫向滾動條，影響了用戶的體驗。而流式布局雖然采用了百分比單位，避免在頁面中出現橫向滾動條，但在不同分辨率下，布局結構不能靈活調整，也同樣影響了用戶在交互中的體驗效果。當然要解決這個問題，開發人員也可以根據不同的設備開發出多個版本的網頁，但這也會導致網站開發和維護工作量的成倍增長。正因為這種情況，EthanMarcotte在2010年提出了響應式布局的概念，簡單來說，就是讓設計的網頁能夠響應用戶的行為，根據不同終端設備環境（系統平臺、屏幕、屏幕手持方向等）自動調整尺寸，實現完美的布局顯示效果。要實現響應式網頁設計，媒體查詢技術、布局技術和響應式圖片是3個關鍵要素。接下來筆者將基于彈性盒子模型的布局技術來分析如何實現響應式網頁布局。

1媒體查詢

在CSS3規范中，媒體查詢可以根據視口的寬度、設備方向等差異化，加載不同的CSS樣式達到渲染不同頁面顯示風格的效果。網頁設計師可以針對不同的終端設備屏幕分辨率來編寫不同的CSS布局樣式，然后用戶瀏覽網頁時，終端設備可以通過自身的屏幕分辨率選擇一種適合的頁面布局。這樣就可以實現在PC、平板和手機等終端設備中調用不同的CSS樣式，從而實現完美的響應式設計[1-3]。媒體查詢由媒體類型、媒體屬性和語法關鍵字3個部分組成，其基本的語法結構如下：上述代碼中，@mediascreen表示媒體的類型為screen，也就是計算機屏幕設備。在媒體查詢中，人們常用的媒體類型主要為screen和all[4-5]。min-width：1200px表示屏幕寬度大于或等于1200px時的應用樣式。下面筆者利用媒體查詢在不同終端設備中實現不同布局技術的效果，分別針對PC、平板和手機端進行樣式布局效果。筆者將設定頁面的內容分為3個模塊，該頁面的HTML結構部分代碼如下：對于PC端來說，屏幕分辨率一般比較大，所以筆者設計為3列的排版布局結構，具體如圖1所示。實現的關鍵代碼如下：針對平板端來說，屏幕的分辨率一般沒有PC端高，所以使用3列排版布局可能會顯得比較緊湊，在這里調整為兩列排版布局結構，具體如圖2所示。實現的關鍵代碼如下：在手機端中，屏幕分辨率一般不大，所以移動端頁面的布局一般都是一列結構顯示效果，具體如圖3所示。實現的關鍵代碼如下：

2彈性盒子模型的原理

使用流式布局進行響應式頁面布局，存在適配工作量大、百分比單位使用不方便等問題，因此在CSS3中，W3C引入了新的布局機制——彈性布局。彈性布局可以輕松進行響應式布局，既不使用浮動，也不用再計算傳統的盒子大小，是一種非常靈活的布局方式。彈性盒子的結構相當于在一個大盒子中放置幾個小盒子，它們彼此互相獨立，容易設置。整個彈性盒子由容器、子元素、主軸和交叉軸構成，具體模型如圖4所示。通過給容器盒子設置display屬性為flex或inline-flex，將其定義為彈性容器。在彈性容器中的子元素則為彈性子元素，在彈性布局中，子元素的排列方向由主軸的排列方向來決定。表1介紹了常用的彈性布局屬性。

3彈性盒子布局的實現

了解了彈性盒子模型的基本原理之后，下面來模擬實現一個博客網站的響應式布局。該頁面在PC端和移動端所呈現的效果如圖5所示。根據頁面的布局結構，該頁面主要分為3個部分，分別為頁面頭部、主要內容區域和頁腳信息，其中的主要內容區域又可以分為導航、文章內容和側邊欄3個部分。頁面的HTML結構代碼為：根據頁面效果分析，可以知道頁面頭部和頁腳信息部分不需要響應式設置，只需要簡單設置CSS盒子屬性即可，所以該部分的CSS代碼為：接下來筆者通過設置彈性盒子對頁面主要內容區域進行響應式布局，其中在PC端上主要內容區域的3個盒子是橫向排列的方式，其中文章內容部分所占據寬度較大。而在移動端上，3個盒子呈現的是縱向排列方式，并且可以看到文章內容部分的排列順序發生調整，變成在主軸的第一個元素。首先使用彈性盒子屬性設置頁面的PC端效果，其中給.content類所在的主要內容區域添加dispalay:flex屬性設置，讓其成為彈性容器，這樣其子元素會按照彈性布局進行排列。然后分別給.main、.nav和.aside類的元素設置order屬性和flex-grow屬性，調整彈性子元素的寬度和排列順序，達到頁面效果的要求。主要代碼如下：接著利用媒體查詢設置移動端效果，通過調整.content類元素的flex-direction屬性將彈性盒子的主軸設置為從上到下的縱向排列，然后調整.main和.nav元素的order屬性，讓文章內容盒子排在主軸的第一個元素。在這里可以看到使用彈性盒子屬性可以非常容易地調整元素的大小和排列順序，能讓網頁在不同的終端設備上都呈現出完美的布局，給用戶帶來較好的體驗效果。

4結語

基于彈性盒子的響應式布局帶給人們一種新的跨平臺Web布局模式，可以較為輕松給人們帶來不同終端設備上的頁面布局方式。當然因為彈性盒子模型是在CSS3版本才提出來的一種布局方式，所以一些早期的瀏覽器是不支持彈性布局的，這點Web開發者要清楚了解。如果不考慮低版本瀏覽器的兼容問題，筆者相信彈性布局將會越來越流行。

參考文獻

[1]黑馬程序員.HTML5移動Web開發[M].北京:中國鐵道出版社,2017.

[2]熊瑞英,王寧.響應式Web設計[J].科技創新導報,2015(26):64-65.

[3]危華明,陳積常,汪小威.基于HTML5+CSS3.0的響應式網站前端設計與實現[J].福建電腦,2018(5):15,31。

[4]曾祥利,柴煒嘉.響應式布局中柵格系統和彈性盒子的比較[J].產業與科技論壇,2015(20):62,64.

[5]吳永娜,楊春旭,許佳南.基于html5+css3的網頁自適應布局設計[J].電腦知識與技術,2019(28):242,244.

作者：余躍泓 單位：中山市技師學院