資訊分享

Information

發布日期:2017/10/11

什麼是RWD響應式網頁?我需要用到RWD響應式網頁嗎?

約莫從2010年那時候開始,各家廠牌陸續推出有別於傳統按鍵型式的智慧型手機,剛開始智手模樣還很陽春,沒想到才兩三年光景智慧型手機竟已普遍至如今人手一機且功能多樣多變了。

 

還記得當初用智手上網瀏覽頁面的感覺嗎?往往打開來是電腦版網頁會縮得很小一塊,放大後滑動依然無法看得很清晰,想按個連結但大手指總是會有點錯選項的困擾,那時手機瀏覽頁面並不是挺容易。

 

後來又漸漸出現進入網站後會先跳出詢問使用「電腦版頁面」或「手機版頁面」的視窗,讓使用者自行選擇哪個版本的頁面進入,但這又有個小煩惱,手機版本雖簡單明瞭,但功能不齊,習慣電腦上網的人依然用手機去點網路版來看,勉強地尋找想要的畫面和功能。

 

RWD網頁的普及正好可以解決上述幾個問題。RWD響應式網頁,為Responsive Web Design的簡稱,讓網站自動針對桌上型電腦、筆記型電腦、平板電腦和智慧型手機不同螢幕尺寸的設備作網頁瀏覽時,頁面會因應不同的尺寸解析度而有不同的呈現方式,讓各個欄位在相對應的版面中自行調整,以清楚呈現給瀏覽中的使用者。

 

例如:某響應式網頁先設定好當螢幕寬度大於1300像素時(如電腦),六個欄位會水平排在同一列;當螢幕寬度在600到1300像素之間時(如筆電),會分為上下兩列且一列三個欄位;當螢幕寬度在400到600像素之間時(如平板),會分為三個列且一列兩個欄位;螢幕寬度在400像素以下時(如手機),六個欄位垂直由上往下一個個排序。則今天使用者用不同大小的裝置機器去點開網頁時,網頁就立刻偵測寬度來調整到適合的模式以便觀看,用桌機就看到六欄並排;小型筆電可能就三欄三欄排;平版兩欄兩欄排三層;手機就一欄一欄滑下去看。

桌上型電腦畫面     筆記型電腦畫面     平板電腦畫面     智慧型手機畫面

 

 

 

 

光一個網站就能隨讀者用多大的螢幕開啟調整到最好閱讀的方式,製作網站的設計師也不用為同個頁面製作一堆版本,是不是很聰明呢?尤其當今使用平板和手機上網的人數逐漸成長,越來越少人為了搜尋個網站坐在電腦前了,擁有一個RWD的網站更能讓大家隨時隨地都點擊到你。