摘 要：隨著Html和Css技術(shù)的發(fā)展，網(wǎng)絡(luò)終端設(shè)備的日益多樣，網(wǎng)頁的布局方式和技術(shù)發(fā)生了很多變化。本文從布局的靈活性維度探討自適應(yīng)網(wǎng)頁布局的主要特征和方法。

關(guān)鍵詞：網(wǎng)頁布局；前端；自適應(yīng)

從布局的靈活性維度，網(wǎng)頁布局可以分為固定布局和自適應(yīng)布局。固定布局的元素大小和排列方式是固定的，但是實際顯示時受到顯示終端的尺寸和分辨率限制，往往無法獲得最理想的顯示效果。與之相對的就是自適應(yīng)布局，自適應(yīng)布局是更為靈活自由的布局方式，這種方式對顯示終端的大小具備自適應(yīng)的特點，能夠較好地適應(yīng)不同大小比例的終端設(shè)備，獲得較穩(wěn)定的顯示效果。

一、固定布局

固定布局主要使用盒子模型作為基本框架，以標(biāo)準(zhǔn)文檔流為基本規(guī)律，將具有“block”屬性的塊元素如“div”、“header”、“section”、“article”、“footer”、“form”、“ul”、“ol”、“dl”、“table”、“p”等元素作為“盒子”主體分割空間。非彈性布局主要使用“px”、“mm”、“cm”等固定單位確定“盒子”的“width”寬度和“height”高度從而限定盒子的大小，需要注意的是“margin”、“padding”和“border”的寬度屬性會疊加在盒子的寬高屬性上共同決定盒子的實際大小。

二、自適應(yīng)布局

除了H5標(biāo)準(zhǔn)中出現(xiàn)的彈性布局屬性flex，自適應(yīng)布局也可以用多種方法實現(xiàn)。下面，探討常用的幾種方法。

（1）用百分比做單位設(shè)置盒子模型的大小

用百分比做單位進行布局時，也以盒子模型作為主要布局規(guī)律。一般來說，主要決定盒子大小的“width”、“height”“padding”“margin”屬性如果設(shè)置為百分比，它的實際大小取決于父元素的“width”、“height”設(shè)置。父元素會向上追溯一直到瀏覽器窗口。百分比做單位的設(shè)置方式由于不固定大小但約定了比例，可以隨動窗口大小實現(xiàn)一定的自適應(yīng)效果。

（2）多列布局columns

多列布局主要通過設(shè)置裝有某些內(nèi)容的盒子元素的“column-count”值從而限定該盒子中內(nèi)容被分割成多少列，并通過設(shè)置“column-gap”值限定列之間的空隙大小來實現(xiàn)網(wǎng)頁的多列布局。如果不限定每一列的寬度，即“column-width”值，則內(nèi)容顯示會在保持限定列數(shù)的同時隨動瀏覽器窗口變化自動調(diào)整，從而實現(xiàn)一定的自適應(yīng)效果。需要注意的是Internet Explorer 9及更早 IE 版本瀏覽器不支持 column-count 屬性。所以使用該屬性要注意兼容性問題。

（3）彈性布局flex屬性

彈性布局屬性flex也是Html5新增的屬性。flex彈性布局提出“容器”的概念，前端頁面上一切采用flex布局的元素，都可以看做flex容器（flex container），簡稱“容器”；而容器的所有子元素自動成為容器成員，稱為flex項目（flex item），簡稱“項目”。

容器中的項目默認(rèn)沿水平方向的主軸“main axis”排列，垂直方向的軸叫做交叉軸“cross axis”。單個項目占據(jù)的主軸空間叫做“main size”，占據(jù)的交叉軸空間叫做“cross size?！?/p>

通過在“容器”元素上設(shè)置“display：flex”，可以將“容器元素”變成彈性盒子。在這個基礎(chǔ)上，可以通過“flex-direction”設(shè)置“項目元素”的排列方向，通過“flex-wrap”設(shè)置項目如何換行，從而實現(xiàn)“項目元素”簡單的自適應(yīng)排列。需要注意的是當(dāng)任何“容器”被指定為flex布局后，它子元素的float、clear和vertical-align屬性將不再起作用。

（4）viewport meta標(biāo)簽與移動終端的自適應(yīng)

由于移動設(shè)備的廣泛使用，在移動設(shè)備上訪問網(wǎng)頁越來越普遍，使用手機瀏覽器瀏覽網(wǎng)頁時會講頁面顯示在一個虛擬的“窗口”（viewport）中，通常這個虛擬窗口不受手機實際屏幕大小限制，用戶可以通過平移和縮放操作來分別查看網(wǎng)頁的局部。這時，可以在lt;headgt;標(biāo)簽中增加一個lt;metagt;標(biāo)簽，并設(shè)置lt;meta name=”viewport” width=device-width initial-scale=1 maximum-scale=1″gt;，讓網(wǎng)頁開發(fā)者在制作網(wǎng)頁時直接控制 viewport窗口 的大小和縮放方式，實現(xiàn)網(wǎng)頁的移動終端屏幕自適應(yīng)。其中，“width”、“height”屬性控制 viewport 的大小，可以指定為固定px值或者百分比；“initial-scale”屬性控制頁面初始加載縮放比例，“maximum-scale”、“minimum-scale”值設(shè)置允許用戶縮放到的最大最小比例。

綜上所述，由于自適應(yīng)布局能夠帶來更好的用戶體驗，在網(wǎng)頁布局中獲得了廣泛的運用，由于自適應(yīng)布局方法多樣，可以根據(jù)實際應(yīng)用場景，靈活選擇合適的實現(xiàn)方法進行開發(fā)。

參考文獻：

[1]劉心美.DIV+CSS網(wǎng)頁布局的設(shè)計與實現(xiàn)[J].科技資訊，2021

[2]韋立梅，張淑榮.基于HTML+CSS+JQuery的網(wǎng)站開發(fā)簡述[J].電腦與電信，2017

作者簡介：李時穎（1982—），女，獲蘇州大學(xué)藝術(shù)碩士專業(yè)學(xué)位，現(xiàn)為蘇州經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院軟件專業(yè)教師，主要研究方向為web前端技術(shù) UI設(shè)計。