零代碼低代碼平臺(tái) 用戶(hù)生產(chǎn)軟件 軟件共享
快速信息化 行業(yè)盛會(huì)邀您共享

蘇柏亞網(wǎng)絡(luò)學(xué)院系統(tǒng)V8動(dòng)態(tài)布局放異彩

2017年07月29日

多終端自適應(yīng)是此次改版的一個(gè)基本思路,目的就是要讓電腦手機(jī)平板等不同訪(fǎng)問(wèn)終端都能體驗(yàn)到同樣的設(shè)計(jì)風(fēng)格和水準(zhǔn)。

為了實(shí)現(xiàn)上述目標(biāo),我們用HTML5對(duì)系統(tǒng)的前端、用戶(hù)端、管理端進(jìn)行大規(guī)模重構(gòu),徹底解決系統(tǒng)在不同終端和不同瀏覽器上的兼容標(biāo)題。

移動(dòng)設(shè)備正超過(guò)桌面設(shè)備,成為訪(fǎng)問(wèn)互聯(lián)網(wǎng)的最常見(jiàn)終端。于是,網(wǎng)頁(yè)設(shè)計(jì)師不得不面對(duì)一個(gè)難題:如何才能在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁(yè)?

手機(jī)的屏幕比較小,寬度通常在800像素以下;PC的屏幕寬度,一般都在1000像素以上(目前主流寬度是1366×768),有的還達(dá)到了2000像素。同樣的內(nèi)容,要在大小迥異的屏幕上,都呈現(xiàn)出滿(mǎn)意的效果,并不是一件容易的事

很多網(wǎng)站的解決方法,是為不同的設(shè)備提供不同的網(wǎng)頁(yè),比如專(zhuān)門(mén)提供一個(gè)mobile版本,或者iPhone / iPad版本。這樣做固然保證了效果,但是比較麻煩,同時(shí)要維護(hù)好幾個(gè)版本,而且如果一個(gè)網(wǎng)站有多個(gè)portal(入口),會(huì)大大增加架構(gòu)設(shè)計(jì)的復(fù)雜度。

此次改版的解決方案就是一次設(shè)計(jì)多端運(yùn)行,通過(guò)系統(tǒng)對(duì)屏幕寬度的識(shí)別,以動(dòng)態(tài)布局技術(shù)自動(dòng)調(diào)整頁(yè)面內(nèi)容寬度和高度,從而在自適應(yīng)屏幕的同時(shí),保障了高質(zhì)量的訪(fǎng)問(wèn)體驗(yàn)。