技術上又該如何實現「RWD響應式網頁設計」?

RWD響應式網站設計的實現,主要是得依賴「CSS3」的media queries(媒體查詢)技術,借由查詢當前螢幕寬度,進而讓web自已取用對應的CSS樣式,來改變web內容、圖片的版面排版,RWD也因此才得以實現。此外隨著「HTML5」規範日趨成熟,在HTML5框架下能得到許多行動裝置資源,例如影片播放、相機攝影、GPS定位、陀螺儀偵測、動畫繪製...等,都讓HTML5成為RWD、Web App的開發首選。現今web設計著重動畫效果的前題下,「jQuery」早已成為不可或缺重要技術,例如選單收合、圖片輪播,彈跳視窗、動畫效果...等,都需仰賴jQuery技術。

「CSS3 + HTML5 + jQuery」是一個好的RWD響應式網站設計不可或缺的技術,不僅僅只是在技術上,在思維上更是需要網頁開發者們的挑戰。

RWD響應式網站設計 常見螢幕尺寸界線

雖說「RWD響應式網站設計」技術能讓網頁本身,自動依裝置螢幕尺寸縮放並調整排版,理論上是不該有「螢幕尺寸界線」這樣的設定,但開發人員為讓開發過程更加有效率、有品質,且讓後續接手的維護人員能快速上手,會以當前常見的裝置螢幕尺寸做為參考,訂定數個尺寸界線做為開發標準,就以近年火熱的 RWD Framework Bootstrap 為例:

超小螢幕 手機
小螢幕 平板
中等螢幕 筆電/桌機
大螢幕 桌機/電視
< 768px
≥ 768px
≥ 992px
≥ 1200px

Bootstrap的網格系統定義四種螢幕寬度做為界線,好讓使用它來開發的人員能依此做為基準來設計網頁。