進入移動互聯(lián)網(wǎng)時代后,手機網(wǎng)站頻頻崛起,不過大部分人都不知道手機網(wǎng)站模板如何布局,使得一個能令人滿意的手機網(wǎng)站難得一見,大部分手機網(wǎng)站都不符合訪客的閱讀習慣。經(jīng)過一段時間收集資料,現(xiàn)在整理出以下手機網(wǎng)站模板布局的方法。
1. 自適應布局模式
在編寫CSS時,不建議前端工程師把容器(不管是外層容器還是內(nèi)層)的寬度定死。為達到適配各種手持設備,建議前端工程師使用自適應布局模式(支付寶 采用了自適應布局模式),因為這樣做可以讓你的頁面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能夠正常的顯示,無需再次考慮設備的分辨率。
2. 狹窄布局
在小屏幕上顯示大的web頁面仍舊需要一些信息視覺處理方法。目前一些瀏覽器采用狹窄布局作為默認查看模式,因為整個內(nèi)容的顯示窄且長,并且所有內(nèi)容都做了簡化以符合屏幕寬度。狹窄布局的主要好處就是文本容易閱讀,如果文本的寬度超過屏幕的寬度,用戶的閱讀就會很困難。
3. 原始布局
由于狹窄布局存在很多可用性方面的問題,所以很多瀏覽器還提供原始布局頁面模式,讓用戶根據(jù)內(nèi)容來選擇不同的視圖模式,原始布局中,大圖片細節(jié)和表格的效果會更好,同時如果用戶知道PC上的網(wǎng)站的結構,那么就很容易找到自己所需要的內(nèi)容。當然原始布局并非什么問題都沒有。最糟糕的就是閱讀寬文本內(nèi)容,會很費力。用戶每次都得向前向后拉動滾動條。另外由于頁面很大,所以需要滾動的地方也越多。
4. 理想布局
很明顯,小屏幕手機上的頁面瀏覽仍需要很多改進和革新。如果想讓自己的網(wǎng)站在小屏幕上具有可讀性,可以遵守以下三個指導建議:避免那些一眼就能看出來的大物體;避免在圖片上使用小文本;頁面要輕化。
適當遵循以上四種手機網(wǎng)站布局的方法,再靈活使用自己所學的專業(yè)技巧,最后就能制作出一個完美的手機網(wǎng)站。