行業(yè)動態(tài)自適應(yīng)網(wǎng)頁設(shè)計問題

發(fā)布：2019-03-14 13:19:01 瀏覽：5671

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

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

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

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

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

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

React讓網(wǎng)頁開發(fā)變成一種簡單的概念。和以往使用JQuery或是其他的套件有很大不同的是,React把網(wǎng)頁中的元素當成一個一個的“組件”,先定義“組件”,再將“組件”塞進網(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)頁的文件對象的方式達成新網(wǎng)頁的呈現(xiàn)。相較于傳統(tǒng)瀏覽器整個重新剖析計算新網(wǎng)頁,React可以讓瀏覽器呈現(xiàn)網(wǎng)頁的效率大為增進。

使用React,網(wǎng)頁分成了“組件”和“數(shù)據(jù)”,只要管理數(shù)據(jù),讓React來負責渲染。這樣的作法,我們可以很容易地開發(fā)出一個純AJAX網(wǎng)站,讓網(wǎng)頁加載后,便不再需要重新整理,全部使用JS去抓“數(shù)據(jù)”。還有一個好處就是不用再為處理這些數(shù)據(jù)而傷透腦筋,只要將數(shù)據(jù)放進該放的地方就好。使用React的數(shù)據(jù)流寫前端的時候,我們只要考慮整體,而不用考慮細節(jié)。而分工從一般網(wǎng)頁設(shè)計上的功能性分工,變成“組件”各自處理自己的部分,而“組件”中還可以遷入其他組件,形成一個數(shù)據(jù)流。

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

3.1舊版IE瀏覽器

因為IE老舊,而有些地方又常常指定使用舊版IE(如IE8),導(dǎo)致目前還有大量舊版IE使用者。

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

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

3.2不同的瀏覽器

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

3.3不同的屏幕大小

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

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

3.4操作的模式和JS事件

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

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

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

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

其實這個問題不只在自適應(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%甚至更小。