html6sh@vip.163.com
QQ:3272893092
隨著近年來(lái)移動(dòng)裝備越來(lái)越流行，我們有必要說(shuō)明一下，一般網(wǎng)站是如何在小型裝備展示，以及如何適應(yīng)多重屏幕的。目前主流的兩種方案，分別是「手機(jī)版網(wǎng)站」與「RWD 設(shè)計(jì)」，我們會(huì)針對(duì)這兩種方案做簡(jiǎn)單的說(shuō)明，讓您了解該如何選擇。
手機(jī)版網(wǎng)站
這是早期最傳統(tǒng)的解決方案，由于手機(jī)屏幕較小，沒(méi)有辦法呈現(xiàn)完整的網(wǎng)站樣貌，且早期太多Flash 等等不支援手機(jī)顯示的網(wǎng)站元件，因此那時(shí)候都是由程序判斷瀏覽器的UserAgent 是否為手機(jī)，若是的話，就另外顯示專(zhuān)門(mén)為手機(jī)制作的簡(jiǎn)易版網(wǎng)站介面。
由于最早興起智能手機(jī)風(fēng)潮的是蘋(píng)果 iPhone，所以多數(shù)的手機(jī)版網(wǎng)站與 iPhone 有著類(lèi)似的介面，也就是直列選單加上大大的按鈕，例如下面幾張圖片：
甚至有些網(wǎng)站會(huì)額外替手機(jī)版準(zhǔn)備另一個(gè)網(wǎng)域，例如 sina.com 就另外有一個(gè)手機(jī)專(zhuān)用的 m.facebook.com 網(wǎng)域來(lái)顯示手機(jī)版網(wǎng)站。
這種方式的優(yōu)點(diǎn)是簡(jiǎn)潔明了，不會(huì)下載太多不必要的大圖片來(lái)加重手機(jī)網(wǎng)路負(fù)擔(dān)，特別針對(duì)手機(jī)設(shè)計(jì)的介面也較容易閱讀。
但缺點(diǎn)卻很明顯，不只要額外開(kāi)發(fā)新的網(wǎng)站造成人力浪費(fèi)，手機(jī)UserAgent 的判斷有時(shí)候也會(huì)失誤，最重要的是手機(jī)版網(wǎng)站常常無(wú)法提供完整的功能，可能會(huì)缺東缺西，因此同常都要提供一個(gè)返回桌面版的選項(xiàng)。
RWD 響應(yīng)式設(shè)計(jì)
RWD 的全名為 Responsive Web Design，中文稱(chēng)作響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，意思是說(shuō)，網(wǎng)頁(yè)會(huì)根據(jù)當(dāng)下的屏幕大小，自動(dòng)將自己的排版調(diào)成對(duì)應(yīng)的形狀來(lái)適應(yīng)。如下圖：
很明顯的，當(dāng)屏幕越來(lái)越窄，網(wǎng)站本身會(huì)將版面調(diào)整成垂直排版，適合在小屏幕上閱讀。這種設(shè)計(jì)需要較為資深有經(jīng)驗(yàn)的前端設(shè)計(jì)師才能夠掌握，但目前已經(jīng)是網(wǎng)頁(yè)設(shè)計(jì)的主流了。
RWD 的優(yōu)點(diǎn)非常名確，我們只需要一次設(shè)計(jì)，就能適應(yīng)所有版面，節(jié)省制作成本，網(wǎng)站風(fēng)格也能統(tǒng)一。另外，不單純只是手機(jī)與桌機(jī)的差別，只要是屏幕大小不同，如平板等等，都可以根據(jù)屏幕來(lái)做適當(dāng)?shù)呐虐妫粫?huì)出現(xiàn) iPad 只能看手機(jī)版的窘?jīng)r。
至于缺點(diǎn)是常常被忽略的，首先，RWD 設(shè)計(jì)終究很難將桌面版完美的排成手機(jī)合適的樣貌，總會(huì)有些跑版（經(jīng)驗(yàn)老到的設(shè)計(jì)師有能力避免），而手機(jī)版網(wǎng)站則是特別為了手機(jī)而設(shè)計(jì)，有較佳的閱讀與操作體驗(yàn)。另外，由于 RWD 不管屏幕大小，都會(huì)把網(wǎng)站的所有內(nèi)容與圖片載入，接著才根據(jù)屏幕大小選擇要不要顯示，所以對(duì)于手機(jī)網(wǎng)路與記憶體來(lái)說(shuō)有較大的負(fù)擔(dān)。
我該如何選擇？
基本上，如果您的預(yù)算不是很充足，其實(shí)目前主流的 RWD 設(shè)計(jì)就非常適合您了，多數(shù)有經(jīng)驗(yàn)的網(wǎng)頁(yè)設(shè)計(jì)公司都會(huì)將 RWD 設(shè)計(jì)列為網(wǎng)站標(biāo)準(zhǔn)配備，不會(huì)對(duì)您加收太多費(fèi)用。而您也只需要維護(hù)一個(gè)網(wǎng)站即可。若您的預(yù)算充足，也可以請(qǐng)?jiān)O(shè)計(jì)公司替手機(jī)屏幕做更多的優(yōu)化。
若您的網(wǎng)站功能較特殊，需要一個(gè)完全適用手機(jī)版的獨(dú)立網(wǎng)站，當(dāng)然也可以請(qǐng)制作公司代為開(kāi)發(fā)，但制作與日后維護(hù)很有可能就是兩個(gè)網(wǎng)站的成本了。
如沒(méi)特殊注明，文章均為江浙滬網(wǎng)絡(luò)推廣,轉(zhuǎn)載請(qǐng)注明來(lái)自http://www.0898bike.com/html/news/
志強(qiáng)網(wǎng)絡(luò)擁有資深設(shè)計(jì)師團(tuán)隊(duì)和自主系統(tǒng)開(kāi)發(fā)技術(shù)團(tuán)隊(duì)，為客戶專(zhuān)業(yè)定制企業(yè)品牌網(wǎng)站、響應(yīng)式網(wǎng)站、商城系統(tǒng)、手機(jī)微信網(wǎng)站、外貿(mào)網(wǎng)站、營(yíng)銷(xiāo)型網(wǎng)站、旅游網(wǎng)站、微信小程序、APP等。歡迎廣大客戶咨詢(xún)！
