自適應(yīng)網(wǎng)頁(yè)制作的技術(shù)研究

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

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

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

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

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

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

1 流式布局

1.1 流式布局的概念

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

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

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

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

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

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

如圖1所示：

2 響應(yīng)式布局

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

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

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

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

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

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

3 彈性布局

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

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

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

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

3.1 彈性布局的概念

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

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

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

4 總結(jié)

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

參考文獻(xiàn)：

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

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

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

作者簡(jiǎn)介：

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