《【網(wǎng)頁設(shè)計論文】彈性盒子下的響應(yīng)式網(wǎng)頁布局》由會員分享，可在線閱讀，更多相關(guān)《【網(wǎng)頁設(shè)計論文】彈性盒子下的響應(yīng)式網(wǎng)頁布局（4頁珍藏版）》請在裝配圖網(wǎng)上搜索。
1、【網(wǎng)頁設(shè)計論文】彈性盒子下的響應(yīng)式網(wǎng)頁布局
摘要：一個良好的網(wǎng)頁布局，可以有效提升用戶瀏覽的舒適度，進而優(yōu)化用戶體驗。而在移動互聯(lián)網(wǎng)時代，用戶除了使用PC端的桌面瀏覽器訪問網(wǎng)頁，還會使用其他各種移動終端訪問網(wǎng)頁。而響應(yīng)式頁面布局，可以是一個網(wǎng)頁能夠兼容不同終端，可以為不同終端用戶提供更為舒適的界面和良好的用戶體驗?；诖?，筆者將介紹基于彈性盒子模型實現(xiàn)響應(yīng)式頁面布局的原理和思路。
關(guān)鍵詞：響應(yīng)式布局；媒體查詢；彈性盒子
引言
傳統(tǒng)的網(wǎng)頁布局技術(shù)，大多是針對PC端網(wǎng)頁進行開發(fā)的，一般包括固定寬度布局或流式布局。固定寬度布局受限于不同瀏覽器的
2、分辨率，在小屏幕大寬度中會在瀏覽器中出現(xiàn)橫向滾動條，影響了用戶的體驗。而流式布局雖然采用了百分比單位，避免在頁面中出現(xiàn)橫向滾動條，但在不同分辨率下，布局結(jié)構(gòu)不能靈活調(diào)整，也同樣影響了用戶在交互中的體驗效果。當(dāng)然要解決這個問題，開發(fā)人員也可以根據(jù)不同的設(shè)備開發(fā)出多個版本的網(wǎng)頁，但這也會導(dǎo)致網(wǎng)站開發(fā)和維護工作量的成倍增長。正因為這種情況，EthanMarcotte在2010年提出了響應(yīng)式布局的概念，簡單來說，就是讓設(shè)計的網(wǎng)頁能夠響應(yīng)用戶的行為，根據(jù)不同終端設(shè)備環(huán)境（系統(tǒng)平臺、屏幕、屏幕手持方向等）自動調(diào)整尺寸，實現(xiàn)完美的布局顯示效果。要實現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計，媒體查詢技術(shù)、布局技術(shù)和響應(yīng)式圖片是3個關(guān)
3、鍵要素。接下來筆者將基于彈性盒子模型的布局技術(shù)來分析如何實現(xiàn)響應(yīng)式網(wǎng)頁布局。
1媒體查詢
在CSS3規(guī)范中，媒體查詢可以根據(jù)視口的寬度、設(shè)備方向等差異化，加載不同的CSS樣式達到渲染不同頁面顯示風(fēng)格的效果。網(wǎng)頁設(shè)計師可以針對不同的終端設(shè)備屏幕分辨率來編寫不同的CSS布局樣式，然后用戶瀏覽網(wǎng)頁時，終端設(shè)備可以通過自身的屏幕分辨率選擇一種適合的頁面布局。這樣就可以實現(xiàn)在PC、平板和手機等終端設(shè)備中調(diào)用不同的CSS樣式，從而實現(xiàn)完美的響應(yīng)式設(shè)計[1-3]。媒體查詢由媒體類型、媒體屬性和語法關(guān)鍵字3個部分組成，其基本的語法結(jié)構(gòu)如下：上述代碼中，@mediascreen表
4、示媒體的類型為screen，也就是計算機屏幕設(shè)備。在媒體查詢中，人們常用的媒體類型主要為screen和all[4-5]。min-width：1200px表示屏幕寬度大于或等于1200px時的應(yīng)用樣式。下面筆者利用媒體查詢在不同終端設(shè)備中實現(xiàn)不同布局技術(shù)的效果，分別針對PC、平板和手機端進行樣式布局效果。筆者將設(shè)定頁面的內(nèi)容分為3個模塊，該頁面的HTML結(jié)構(gòu)部分代碼如下：對于PC端來說，屏幕分辨率一般比較大，所以筆者設(shè)計為3列的排版布局結(jié)構(gòu)，具體如圖1所示。實現(xiàn)的關(guān)鍵代碼如下：針對平板端來說，屏幕的分辨率一般沒有PC端高，所以使用3列排版布局可能會顯得比較緊湊，在這里調(diào)整為兩列排版布局結(jié)構(gòu)，具體
5、如圖2所示。實現(xiàn)的關(guān)鍵代碼如下：在手機端中，屏幕分辨率一般不大，所以移動端頁面的布局一般都是一列結(jié)構(gòu)顯示效果，具體如圖3所示。實現(xiàn)的關(guān)鍵代碼如下：
2彈性盒子模型的原理
使用流式布局進行響應(yīng)式頁面布局，存在適配工作量大、百分比單位使用不方便等問題，因此在CSS3中，W3C引入了新的布局機制——彈性布局。彈性布局可以輕松進行響應(yīng)式布局，既不使用浮動，也不用再計算傳統(tǒng)的盒子大小，是一種非常靈活的布局方式。彈性盒子的結(jié)構(gòu)相當(dāng)于在一個大盒子中放置幾個小盒子，它們彼此互相獨立，容易設(shè)置。整個彈性盒子由容器、子元素、主軸和交叉軸構(gòu)成，具體模型如圖4所示。通過給容器盒子設(shè)置d
6、isplay屬性為flex或inline-flex，將其定義為彈性容器。在彈性容器中的子元素則為彈性子元素，在彈性布局中，子元素的排列方向由主軸的排列方向來決定。表1介紹了常用的彈性布局屬性。
3彈性盒子布局的實現(xiàn)
了解了彈性盒子模型的基本原理之后，下面來模擬實現(xiàn)一個博客網(wǎng)站的響應(yīng)式布局。該頁面在PC端和移動端所呈現(xiàn)的效果如圖5所示。根據(jù)頁面的布局結(jié)構(gòu)，該頁面主要分為3個部分，分別為頁面頭部、主要內(nèi)容區(qū)域和頁腳信息，其中的主要內(nèi)容區(qū)域又可以分為導(dǎo)航、文章內(nèi)容和側(cè)邊欄3個部分。頁面的HTML結(jié)構(gòu)代碼為：根據(jù)頁面效果分析，可以知道頁面頭部和頁腳信息部分不需要響應(yīng)式設(shè)
7、置，只需要簡單設(shè)置CSS盒子屬性即可，所以該部分的CSS代碼為：接下來筆者通過設(shè)置彈性盒子對頁面主要內(nèi)容區(qū)域進行響應(yīng)式布局，其中在PC端上主要內(nèi)容區(qū)域的3個盒子是橫向排列的方式，其中文章內(nèi)容部分所占據(jù)寬度較大。而在移動端上，3個盒子呈現(xiàn)的是縱向排列方式，并且可以看到文章內(nèi)容部分的排列順序發(fā)生調(diào)整，變成在主軸的第一個元素。首先使用彈性盒子屬性設(shè)置頁面的PC端效果，其中給.content類所在的主要內(nèi)容區(qū)域添加dispalay:flex屬性設(shè)置，讓其成為彈性容器，這樣其子元素會按照彈性布局進行排列。然后分別給.main、.nav和.aside類的元素設(shè)置order屬性和flex-grow屬性，調(diào)整
8、彈性子元素的寬度和排列順序，達到頁面效果的要求。主要代碼如下：接著利用媒體查詢設(shè)置移動端效果，通過調(diào)整.content類元素的flex-direction屬性將彈性盒子的主軸設(shè)置為從上到下的縱向排列，然后調(diào)整.main和.nav元素的order屬性，讓文章內(nèi)容盒子排在主軸的第一個元素。在這里可以看到使用彈性盒子屬性可以非常容易地調(diào)整元素的大小和排列順序，能讓網(wǎng)頁在不同的終端設(shè)備上都呈現(xiàn)出完美的布局，給用戶帶來較好的體驗效果。
4結(jié)語
基于彈性盒子的響應(yīng)式布局帶給人們一種新的跨平臺Web布局模式，可以較為輕松給人們帶來不同終端設(shè)備上的頁面布局方式。當(dāng)然因為彈性盒子
9、模型是在CSS3版本才提出來的一種布局方式，所以一些早期的瀏覽器是不支持彈性布局的，這點Web開發(fā)者要清楚了解。如果不考慮低版本瀏覽器的兼容問題，筆者相信彈性布局將會越來越流行。
參考文獻
[1]黑馬程序員.HTML5移動Web開發(fā)[M].北京:中國鐵道出版社,2017.
[2]熊瑞英,王寧.響應(yīng)式Web設(shè)計[J].科技創(chuàng)新導(dǎo)報,2015(26):64-65.
[3]危華明,陳積常,汪小威.基于HTML5+CSS3.0的響應(yīng)式網(wǎng)站前端設(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īng)布局設(shè)計[J].電腦知識與技術(shù),2019(28):242,244.
【網(wǎng)頁設(shè)計論文】彈性盒子下的響應(yīng)式網(wǎng)頁布局
