摘 要：隨著互聯(lián)網(wǎng)的不斷發(fā)展，尤其是移動互聯(lián)網(wǎng)的發(fā)展，網(wǎng)頁瀏覽設(shè)備也是尺寸各異，對于顯示固定尺寸的網(wǎng)頁存在諸多的缺陷，因而如何使網(wǎng)頁內(nèi)容能夠在不同尺寸的設(shè)備下正常的顯示，提高用戶的瀏覽體驗是網(wǎng)頁制作人員必須掌握的技術(shù)，本文針對自適應(yīng)網(wǎng)頁的制作技術(shù)進行深入的研究和探討。

關(guān)鍵詞：流式布局；響應(yīng)式布局；彈性布局

固定尺寸的頁面是利用絕對單位固定網(wǎng)頁元素的寬度，使網(wǎng)頁的布局排列不隨分辨率和設(shè)備尺寸的變化而發(fā)生改變。因為早期顯示設(shè)備更新?lián)Q代相對緩慢，設(shè)備的尺寸變化差異并不大，大多都集中在1024的分辨率左右，后來隨著寬屏與移動設(shè)備的普及，顯示設(shè)備的尺寸就開始多樣化，尤其是手機的分辨率更是種類繁多。

為適應(yīng)技術(shù)的發(fā)展，用戶的需求，網(wǎng)頁的尺寸不得不針對設(shè)備進行改變。早期解決方案，大多采用電腦與移動設(shè)備獨立設(shè)置站點的方式，電腦準備一個站點，移動設(shè)備設(shè)計一個站點，通過設(shè)備判斷，自行跳轉(zhuǎn)顯示相應(yīng)的站點頁面。

隨著移動設(shè)備智能化的推進，電腦與手持設(shè)備的界限開始變得模糊，分別設(shè)置站點的方式顯得有點效率低下，如何能實現(xiàn)一勞永逸呢？自適應(yīng)的網(wǎng)頁制作技術(shù)就開始流行起來。

自適應(yīng)網(wǎng)頁并不只是在頁面尺寸上的變化那么簡單，還包括內(nèi)容上的改變，總體可以分為三種，流式布局、自使用布局和響應(yīng)式布局三種。

1 流式布局

1.1 流式布局的概念

對于流式布局的概念，不少教材和網(wǎng)絡(luò)上都有許多不同的理解，但是核心的思想都差不多。所謂流式布局，有的也叫流體布局，是通過改變元素的排列達到適應(yīng)設(shè)備尺寸的目的。即頁面內(nèi)容會隨著容器尺寸的變化在排列上而發(fā)生流動，就像液體一樣，遇阻后，哪里有空間，就往哪里流，流式布局的思想也是如此。

文檔中的元素在默認狀態(tài)下，都處于向左向上的流體排列狀態(tài)，例如刪掉排在前列的元素，后面的元素會自動向左或向上補位，從而保證內(nèi)容排列上的連續(xù)性。

1.2 流式布局的應(yīng)用

流式布局既可以針對固定寬度元素的排列，也可以針對自適應(yīng)寬度元素的排列，其中浮動技術(shù)是流式布局中使用最多的技術(shù)之一，浮動可使不同元素橫向排列。

固定寬度使用絕對單位設(shè)定，例如px；

自適應(yīng)寬度使用相對單位設(shè)定，例如百分比或em。

如圖1所示：

2 響應(yīng)式布局

流式布局雖然可以實現(xiàn)一定程度上的自適應(yīng)，但流式布局需要對排列的每一個元素設(shè)置大小，切隨著尺寸的變化，并不能適應(yīng)所有不同尺寸的顯示設(shè)備。尤其是在較小的空間顯示較多的內(nèi)容時，流動布局就更加顯得力不從心了。

2.1 響應(yīng)式布局的概念

隨著移動互聯(lián)網(wǎng)的迅速發(fā)展，響應(yīng)式布局成為近幾年十分流行的一種布局思想。很多時候，我們需要依據(jù)不同的設(shè)備尺寸如手機、平板、電腦等，對內(nèi)容的大小、排列方式甚至是取舍都要做出不同的選擇。響應(yīng)式布局就是針對設(shè)備的尺寸利用媒體查詢功能進行有條件的判斷，從而依據(jù)不同的情況選擇不同的樣式執(zhí)行。

2.2 響應(yīng)式布局的應(yīng)用

早在CSS2時代，就有了媒體查詢的應(yīng)用，但只能對設(shè)備的類型進行選擇，無法設(shè)置條件。因而媒體查詢的使用受到限制，只是在打印設(shè)置方面略有應(yīng)用。

到了CSS3，媒體查詢的功能被進一步強化，增加了對設(shè)備的條件設(shè)置。如圖2所示：

3 彈性布局

盡管響應(yīng)式布局彌補了流式布局的局限性，但因這種布局有大量的缺陷，也使得在開發(fā)過程中效率低下，響應(yīng)式布局主要有以下缺點：

1）需要兼容的設(shè)備種類太多，工作量太大，開發(fā)效率十分低下；

2）由于是條件性選擇執(zhí)行，導致大量無效的代碼和元素存在，降低了頁面加載的速度；

3）當頁面布局發(fā)生較大改變時，CSS代碼不易于修改和維護，造成代碼的混亂。

3.1 彈性布局的概念

不同于流式布局，彈性布局主要是通過更加靈活分配元素的大小實現(xiàn)對設(shè)備尺寸的適應(yīng)，不影響元素的排列。彈性布局是CSS3新提出的一種布局思想，它可以針對其中已知和未知大小的元素動態(tài)的調(diào)整和分配空間，確保內(nèi)容在排列上并不發(fā)生變化而同時又能適應(yīng)設(shè)備的需求。

3.2 彈性布局的應(yīng)用

流式布局需要對排列的每個元素設(shè)置大小，彈性布局可以自動調(diào)整未分配的空間，從而達到自適應(yīng)的目的。如果說，流式布局對于水平排列的自適應(yīng)還能勉強應(yīng)對，那么對于垂直方向上的自適應(yīng)，就顯得有心無力了，而彈性布局提供了水平和垂直兩種彈性適應(yīng)的方案。如圖3所示：

4 總結(jié)

自適應(yīng)網(wǎng)頁的出現(xiàn)是隨著移動互聯(lián)網(wǎng)的發(fā)展而出現(xiàn)的必然產(chǎn)物，在今后將會更會流行起來，無論是流式布局、響應(yīng)式布局還是彈性布局，都有其自身的優(yōu)點，如何使用，需要參照實際的需求制定解決方案，不可過分追求某一種技術(shù)的使用，否則將適得其反。

參考文獻：

[1] 鄭偉，薛嵐.高職院校圖形類專業(yè)實踐教學研究[J].科技資訊，2010（12）：248.

[2] 鄭偉.網(wǎng)頁布局技術(shù)的對比研究[J].福建電腦，2016（12）.

[3] 鄭偉，薛嵐.高職院校圖形類專業(yè)《網(wǎng)頁設(shè)計與制作》課程建設(shè)改革的探討[J].藝術(shù)科技，2013，26（3）：283.

作者簡介：

鄭偉（1982-），男，湖北宜昌人，工程碩士，講師，研究方向：網(wǎng)站建設(shè)、web前端。