適應性網頁設計簡介

適應性網頁設計 (Responsive Web Design) 簡稱 RWD ,也有人說是自適應網頁設計,或是響應式網頁設計。隨著行動裝置愈來愈多樣化,適應性網頁設計也愈來愈流行。

RWD 是一種網頁設計的技術,這種設計主要是希望讓網站在多種瀏覽裝置上(例如:個人電腦、平板電腦,以及手機…等行動裝置),都能夠順利閱讀和導覽,並且可以減少在小型裝置瀏覽器上,縮放、平移和捲動螢幕的操作。

適應性網頁設計和過去的網頁設計方式,究竟有什麼不同呢?

傳統網頁設計的瀏覽呈現

傳統的網頁設計方式,在不同裝置上,都是同樣的呈現方式。在小型裝置瀏覽器下顯示,只是網頁依比例縮小。有時照片、文字、選單、按鈕…等,都小到看不清楚,或是不容易點選。所以需要使用縮放手勢,不斷的去放大縮小觀看網頁。 (如下圖)

傳統網頁設計 - 瀏覽示意圖

適應性網頁設計的瀏覽呈現

RWD 的網頁設計方式,則是依不同的螢幕解析寬度,去調整不一樣的網頁顯示及導覽方式,讓小型裝置瀏覽器上的網頁,字體不至於縮到太小,選單、按鈕、連結…等,也不太需要經過縮放,就能方便點選操作。 (如下圖)

RWD 適應性網頁設計 - 瀏覽示意圖

網站案例

2 回復
  1. jennifer
    jennifer says:

    您好,我們有RWD的需求,以Android及iOS行動載具 (智慧型手機及Pad) 為主
    設計符合各載具顯示的回應式網頁(視覺設計)

    m****生活網URL (初估有39頁)
    http://m.m****.net.tw/mi

    可否請您就目前m****版面預估工期及預算

    有任何問題,歡迎您隨時與我連絡

    回覆

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *