常用Web前端自適應網頁布局方法研究

摘 要：隨著Html和Css技術的發展，網絡終端設備的日益多樣，網頁的布局方式和技術發生了很多變化。本文從布局的靈活性維度探討自適應網頁布局的主要特征和方法。

關鍵詞：網頁布局；前端；自適應

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

一、固定布局

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

二、自適應布局

除了H5標準中出現的彈性布局屬性flex，自適應布局也可以用多種方法實現。下面，探討常用的幾種方法。

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

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

（2）多列布局columns

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

（3）彈性布局flex屬性

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

容器中的項目默認沿水平方向的主軸“main axis”排列，垂直方向的軸叫做交叉軸“cross axis”。單個項目占據的主軸空間叫做“main size”，占據的交叉軸空間叫做“cross size。”

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

（4）viewport meta標簽與移動終端的自適應

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

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

參考文獻：

[1]劉心美.DIV+CSS網頁布局的設計與實現[J].科技資訊，2021

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

作者簡介：李時穎（1982—），女，獲蘇州大學藝術碩士專業學位，現為蘇州經貿職業技術學院軟件專業教師，主要研究方向為web前端技術 UI設計。