彈性盒子下的響應(yīng)式網(wǎng)頁(yè)布局

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

摘要：一個(gè)良好的網(wǎng)頁(yè)布局，可以有效提升用戶瀏覽的舒適度，進(jìn)而優(yōu)化用戶體驗(yàn)。而在移動(dòng)互聯(lián)網(wǎng)時(shí)代，用戶除了使用PC端的桌面瀏覽器訪問(wèn)網(wǎng)頁(yè)，還會(huì)使用其他各種移動(dòng)終端訪問(wèn)網(wǎng)頁(yè)。而響應(yīng)式頁(yè)面布局，可以是一個(gè)網(wǎng)頁(yè)能夠兼容不同終端，可以為不同終端用戶提供更為舒適的界面和良好的用戶體驗(yàn)。基于此，筆者將介紹基于彈性盒子模型實(shí)現(xiàn)響應(yīng)式頁(yè)面布局的原理和思路。

關(guān)鍵詞：響應(yīng)式布局；媒體查詢；彈性盒子

引言

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

1媒體查詢

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

2彈性盒子模型的原理

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

3彈性盒子布局的實(shí)現(xiàn)

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

4結(jié)語(yǔ)

基于彈性盒子的響應(yīng)式布局帶給人們一種新的跨平臺(tái)Web布局模式，可以較為輕松給人們帶來(lái)不同終端設(shè)備上的頁(yè)面布局方式。當(dāng)然因?yàn)閺椥院凶幽Ｐ褪窃贑SS3版本才提出來(lái)的一種布局方式，所以一些早期的瀏覽器是不支持彈性布局的，這點(diǎn)Web開發(fā)者要清楚了解。如果不考慮低版本瀏覽器的兼容問(wèn)題，筆者相信彈性布局將會(huì)越來(lái)越流行。

參考文獻(xiàn)

[1]黑馬程序員.HTML5移動(dòng)Web開發(fā)[M].北京:中國(guó)鐵道出版社,2017.

[2]熊瑞英,王寧.響應(yīng)式Web設(shè)計(jì)[J].科技創(chuàng)新導(dǎo)報(bào),2015(26):64-65.

[3]危華明,陳積常,汪小威.基于HTML5+CSS3.0的響應(yīng)式網(wǎng)站前端設(shè)計(jì)與實(shí)現(xiàn)[J].福建電腦,2018(5):15,31。

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

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

作者：余躍泓 單位：中山市技師學(xué)院