自適應網頁制作的技術研究

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

關鍵詞：流式布局；響應式布局；彈性布局

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

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

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

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

1 流式布局

1.1 流式布局的概念

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

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

1.2 流式布局的應用

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

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

自適應寬度使用相對單位設定，例如百分比或em。

如圖1所示：

2 響應式布局

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

2.1 響應式布局的概念

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

2.2 響應式布局的應用

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

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

3 彈性布局

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

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

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

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

3.1 彈性布局的概念

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

3.2 彈性布局的應用

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

4 總結

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

參考文獻：

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

[2] 鄭偉.網頁布局技術的對比研究[J].福建電腦，2016（12）.

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

作者簡介：

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