王佳

（天津電子信息職業(yè)技術(shù)學(xué)院，天津300350）

?

自適應(yīng)網(wǎng)頁設(shè)計問題淺析

王佳

（天津電子信息職業(yè)技術(shù)學(xué)院，天津300350）

主要淺析React.JS等新網(wǎng)頁設(shè)計概念以及自適應(yīng)網(wǎng)站在設(shè)計時會遇到的問題。

網(wǎng)頁設(shè)計；自適應(yīng)網(wǎng)站；React.JS

1　自適應(yīng)網(wǎng)頁的重要性

這幾年隨著移動設(shè)備的不斷普及，使用手機(jī)和平板電腦觀看網(wǎng)頁的幾率大增，因此，網(wǎng)頁從簡單的HTML進(jìn)化到必須符合各種分辨率的屏幕，這是一個不可避免的趨勢。

目前開發(fā)針對于移動設(shè)備的APP非常流行，各大網(wǎng)站都有其相應(yīng)的APP。但是在學(xué)習(xí)編寫APP的時候，我感覺到有幾個問題值得探討。第一，現(xiàn)在最流行的手機(jī)操作平臺有兩個：Android和IOS，其編程難度都不低；第二，與網(wǎng)站可以直接瀏覽不同，使用者必須另外下載APP。當(dāng)然另外寫一個APP可以提供更具有針對性的服務(wù)，但是提供一個手機(jī)瀏覽器可以瀏覽的版本也是必要的。

2　使用React.JS開發(fā)自適應(yīng)網(wǎng)站

對于開發(fā)自適應(yīng)網(wǎng)站而言，在現(xiàn)在發(fā)達(dá)的開源社區(qū)中，我們有很多可以使用的好東西。Bootstrap3和React.JS就是其中的佼佼者。

Bootstrap是一個前端的Framework，可以使我們節(jié)省很多花費(fèi)在編寫CSS身上的時間。作為設(shè)計自適應(yīng)網(wǎng)站的重點(diǎn)，CSS具有比較容易的會有硬件加速等的優(yōu)化；另外，為了提高效率，能用CSS做到的，就盡量不要用JavaScript來實(shí)現(xiàn)。

React.JS（以下簡稱React），是Facebook底下的開源項(xiàng)目，Instagram就是使用React開發(fā)的。React是個JS框架，同時也是個新的網(wǎng)頁開發(fā)概念。隨著這幾年來的蓬勃發(fā)展，一直不斷推陳出新，甚至可以用來開發(fā)iOSApp。

React讓網(wǎng)頁開發(fā)變成一種簡單的概念。和以往使用JQuery或是其他的套件有很大不同的是，React把網(wǎng)頁中的元素當(dāng)成一個一個的“組件”，先定義“組件”，再將“組件”塞進(jìn)網(wǎng)頁中。這樣的做法有幾個好處：第一、我們可以重復(fù)使用相同的組件，卻只要定義一遍；第二、我們可以享有React提供的渲染優(yōu)化。所謂的渲染優(yōu)化，就是React對于網(wǎng)頁內(nèi)容呈現(xiàn)的處理方式加以優(yōu)化的算法。在呈現(xiàn)一個新網(wǎng)頁之前，React會先將新舊網(wǎng)頁的內(nèi)容加以比較，找出兩者相異之處后，再以修改舊網(wǎng)頁的文件對象的方式達(dá)成新網(wǎng)頁的呈現(xiàn)。相較于傳統(tǒng)瀏覽器整個重新剖析計算新網(wǎng)頁，React可以讓瀏覽器呈現(xiàn)網(wǎng)頁的效率大為增進(jìn)。

使用React，網(wǎng)頁分成了“組件”和“數(shù)據(jù)”，只要管理數(shù)據(jù)，讓React來負(fù)責(zé)渲染。這樣的作法，我們可以很容易地開發(fā)出一個純AJAX網(wǎng)站，讓網(wǎng)頁加載后，便不再需要重新整理，全部使用JS去抓“數(shù)據(jù)”。還有一個好處就是不用再為處理這些數(shù)據(jù)而傷透腦筋，只要將數(shù)據(jù)放進(jìn)該放的地方就好。

使用React的數(shù)據(jù)流寫前端的時候，我們只要考慮整體，而不用考慮細(xì)節(jié)。而分工從一般網(wǎng)頁設(shè)計上的功能性分工，變成“組件”各自處理自己的部分，而“組件”中還可以遷入其他組件，形成一個數(shù)據(jù)流。

3　開發(fā)中遇到的問題

3.1舊版IE瀏覽器

因?yàn)镮E老舊，而有些地方又常常指定使用舊版IE（如IE8），導(dǎo)致目前還有大量舊版IE使用者。

IE11是一款可支持HTML5標(biāo)準(zhǔn)的瀏覽器，所以我選擇支持。當(dāng)然，我們還是必須另外寫一些程序代碼讓網(wǎng)頁支持IE11。

使用最新的瀏覽器，我們可以使用最新的標(biāo)準(zhǔn)來編寫網(wǎng)站，而不用遷就舊版IE瀏覽器，套件也可以用最新版。最新版往往功能較多或是效率較高，如JQuery 2.X以后版本不支持舊版IE。

3.2不同的瀏覽器

每個瀏覽器的行為和支持的JS、CSS方法不同，撰寫自適應(yīng)網(wǎng)站一定要用各種瀏覽器測試，不然就會出現(xiàn)意外的狀況。如果不想使用太多瀏覽器，除了Chrome外，至少還要再使用FireFox，因?yàn)镕ireFox是一款非常遵守HTML5標(biāo)準(zhǔn)的瀏覽器。

3.3不同的屏幕大小

這是一個基本的問題，不同屏幕大小會影響你的網(wǎng)頁瀏覽模式，有些時候不是調(diào)整一下DIV寬度就可以解決的。

諸如此類還有一些按鈕、表格等，如果可以的話，一開始就設(shè)計一個可大可小的顯示方法，不然的話，就必須針對不同的大小，提供不同的網(wǎng)頁設(shè)計。手機(jī)優(yōu)先是現(xiàn)在的主流，設(shè)計樣式時以小屏幕設(shè)計常?？梢缘玫奖容^好的效果。

3.4操作的模式和JS事件

手機(jī)上的觸控，是不適用鼠標(biāo)事件的，而是另外定義一個“觸控事件”，還有手機(jī)上不容易觸發(fā)Hover事件，有些因?yàn)槭謾C(jī)屏幕小，很難進(jìn)行精準(zhǔn)的點(diǎn)擊。根據(jù)上述原因，設(shè)計自適應(yīng)網(wǎng)頁給手機(jī)使用者使用時，一定要注意按鈕的大小不能太小，也不要在網(wǎng)頁上放太多Hover的事件，如果有用到mousedown、 mouseover等鼠標(biāo)事件，也一定要注意另外定義touchstart、touchmove事件。

3.5不要使用外掛功能，如Flash

這里的外掛指標(biāo)準(zhǔn)（HTML/CSS/JS）之外的網(wǎng)頁外掛工具，像是Flash，因?yàn)槭謾C(jī)版瀏覽器可能不支持這些外掛，很難跨平臺。現(xiàn)在的Android已經(jīng)預(yù)設(shè)不使用Flash了，HTML5標(biāo)準(zhǔn)中也有很多更好用、效率更高的對象能夠取代Flash，現(xiàn)在我們有更好的選擇，使用大量外掛開發(fā)網(wǎng)頁的時代已經(jīng)過去了。

3.6網(wǎng)頁加載速度

其實(shí)這個問題不只在自適應(yīng)網(wǎng)站上會有，一般網(wǎng)站也該注意。

使用了很多套件、自適應(yīng)的CSS檔案，我們的網(wǎng)頁常常會很肥大，尤其是移動設(shè)備常常不會有良好的網(wǎng)絡(luò)環(huán)境，瀏覽網(wǎng)站一次可能就要加載好幾秒甚至幾分鐘。

盡量不要加載不必要的CSS、JS，然后啟用壓縮功能，把空白和換行壓縮掉，并用gzip壓縮，大概可以讓整個網(wǎng)頁變成原本的20%甚至更小。

4　結(jié)語

以上就是開發(fā)自適應(yīng)網(wǎng)站時遇到的幾個問題，使用經(jīng)過測試的套件，盡量使用HTML5標(biāo)準(zhǔn)中的方法，多加測試，就可以輕松開發(fā)跨平臺的網(wǎng)頁了。但是最重要的還是要多了解現(xiàn)在的趨勢，多和人討論，從不同的角度切入，比如設(shè)計師的角度、使用者的角度、管理者的角度，才能契合所有人的需求。

（編輯：姚歡）

Analysis on the Adaptive Web Design Problems

Wang Jia
（Tianjin Electronic Information Vocational College，Tianjin 300350）

This paper mainly analyzes the new web design concepts such as React.JS and websites which will be confronted with problems in the design.

Web design；responsive web design；React.JS

TP393

A

2095-0748（2015）23-0092-02

10.16525/j.cnki.14-1362/n.2015.23.42

2015-10-30

王佳（1983—），女，天津人，碩士，現(xiàn)就職于天津電子信息職業(yè)技術(shù)學(xué)院，講師，主要教學(xué)方向：網(wǎng)頁設(shè)計、圖形圖像處理、U I設(shè)計等。