一次搞懂 RWD 響應式網頁 概念

什麼是 RWD?什麼又是響應式網頁設計?今天讓我們一次搞懂它!首先先從為何需要「響應式網頁設計」開始解釋,了解原因就能夠知道他為何存在!

自從蘋果推出第一支智慧型手機,直到現在行動裝置螢幕都是「直立」為主,和傳統電腦螢幕「橫置」完全差了90度!如果直接把過往設計給電腦的網頁顯示在手機上,會發現整個字變得超級小!根本無法閱讀!

沒有使用 RWD 響應式網頁設計 電腦版
沒有使用 RWD 響應式網頁設計案例 – 電腦顯示正常,字體可以閱讀

沒有使用 RWD 響應式網頁設計 手機
沒有使用 RWD 響應式網頁設計案例 – 手機顯示,字體超小幾乎無法閱讀,也不方便點按

此時聰明的工程師就跳出來說:「我們為手機設計第二套網頁就可以了!」

的確這在初期暫時解決了問題,但是!到了中後期手機螢幕大小各式各樣,尤其是 Android 手機更是沒有一定的規範,再加上各種平板螢幕大小也不一,如果當初網頁設計只考慮「桌機」和「手機」兩種螢幕大小,會導致在某些螢幕上顯示還是會有問題!

於是有聰明的工程師想到,如果網頁能夠依照螢幕大小不同,而自己改變顯示的方式,是不是就能完美的解決問題呢?於是發明了新的解決方法,他就是「RWD 響應式網頁設計」!

使用 RWD響應式網頁設計 完美適應各種螢幕
使用 RWD響應式網頁設計,完美適應各種螢幕

RWD 是「Responsive web design」,中文就是「響應式網頁設計」,響應式看起來很拗口,其實如上所說,就是「依照螢幕大小去做變化」的功能!如此就能用同一套網頁應付所有螢幕,不用再特別開發兩版以上的網頁啦!

延伸閱讀:
一分鐘搞懂 html5 CSS 是什麼
簡單理解 虛擬主機 hosting 是什麼

Written by J
雖然大學唸的是生物,但持著興趣與熱情自學,畢業後轉戰硬體工程師,與宅宅工程師們一起過著沒日沒夜的生活,做著台灣最薄的 intel 筆電,要與 macbook air 比拼。 離開後,憑著一股傻勁與朋友創業,再度轉戰軟體工程師,一手扛起前後端、雙平台 app 開發,過程中雖跌跌撞撞,卻也累計不少經驗。 可惜不是那 1% 的成功人士,於是加入其他成功人士的新創公司,專職開發後端。沒想到卻在採前人坑的過程中,拓寬了眼界,得到了深層的領悟。