【網頁開發】什麼是RWD？不只有工程師要懂的響應式網站設計
閱讀時間約 6 分鐘
還記得在我小學的時候，筆記型電腦不那麼普遍，如果想要看小說或是漫畫，人就一定要跟桌上型電腦綁定，沒辦法像一般書本一樣在任何地點隨心所欲地閱讀小說。
後來到了我國中的時候，mp4 開始變得非常的盛行，除了聽音樂之外，還可以將 .txt 檔案匯入 mp4，讓我可以在看網路小說時不再受限於電腦，那時候就好像發現新大陸一樣，我甚至會偷偷跟同學借 mp4，趁著午休的時候偷偷看。
然而沒想到的是，這一切在到了我高中時都不一樣了。
那個時候是2012年，HTC最輝煌的時代，除了HTC，蘋果的 iPhone 系列手機也漸漸蔚為潮流，4G 網路的盛行，所有的網路行為不再受限於電腦本身。
大家開始會在平板、智慧型手機上購物，瀏覽各式各樣的網頁。
那段時間手機 APP 還沒有那麼盛行，主要的網路行為都還是在網頁上，然而一個網頁的尺寸通常都是固定的，依照電腦的寬度通常都是設定在 1000px 上下，小小的智慧型手機寬度也不過 3、400px ，要怎麼看這麼大的網頁？
早期用手機看電腦的網頁，常常需要一直左右上下滑動，沒辦法擁有像用電腦觀看般的良好體驗。
於是一位國外的平面設計師：Ethan Marcotte，因應新載具的出現，在 2010 提出了一個新的設計理念，並在 2011 年時出版了一本名為《響應式網頁設計》（Responsive Web Design） 的書籍，在其著作中闡述如何應用程式碼（HTML CSS），創造較符合手機載體的介面設計。
科技造英雄，響應式設計的出世
Ethan Marcotten 所提出的響應式網頁設計，就是現在我們在各大求職平台有關網頁設計、工程職缺中，所會提到的 RWD 技能。
現在我們知道 RWD 是因應智慧型手機、平板出世，所創造出來的設計模式。那究竟什麼是 RWD 呢？
根據中文維基百科，養應式網頁設計，是一種網頁設計的技術。
響應式設計可使網站在不同的裝置（從桌面電腦顯示器到行動電話或其他行動裝置）上瀏覽時對應不同解析度皆有適合的呈現，減少使用者進行縮放、平移和捲動等操作行為。
舉我們常用的 google 來說，會發現電腦呈現的畫面與手機的尺寸是不同的，電腦網頁畫面所呈現的圖片及搜尋欄位較大，相較於手機版的，圖片較小，搜尋欄位也不及網頁的大小。
再舉大家常用的電商平台 Momo 作為案例，通常現在的電商網站很少針對網站進行響應式設計，原因在於網頁內容太多，很難全部塞進畫面：
如果我們用手機進到電腦版的畫面瀏覽，就必須用小螢幕觀看原本應該用電腦觀看的畫面，這時候我們發現，需要把畫面放大到很大才能用手指點到畫面，但如果是使用專門為手機設計的 APP 購物就不會有這個問題。
可見 Momo 購物網站並沒有針對手機用戶打造響應式網頁設計（RWD），而是使用了 AWD 技術（因為不是本章重點，所以先不詳加介紹），針對手機用戶直接打造了手機購物 APP。
我們接著再看另外一個有使用響應式網站設計的案例，嘖嘖募資網站：
從圖中我們可以看到，同一個網站在電腦上及手機的畫面很雷同，卻有一些細節不一樣，接下來我們看看以下的比較圖：
在網站版的畫面中，紅色的部分縮小了，綠色區塊的部分在手機版則被併入主要商品圖片的下方。
通常我們會把嘖嘖募資網站的設計稱為「兩欄式」設計，但同樣的網站移到手機上時就變成了「一欄式」設計，內容並沒有縮減，但瀏覽的方向從由左至右，變成由上至下。
透過響應式設計，我們可以依據載具的種類，讓使用者獲得最適合的體驗。
如何實作響應式網頁設計？
目前要實作 RWD 的方式，基本上都會透過 CSS 3 Media Query 語法來進行操作，透過設定載具的斷點（Breakpoint），來調整網頁頁面的內容。
然而要依照每個不同的載具大小開發實作，是非常複雜及耗時的。
於是在 2010 年時，兩位美國的開發者在推特發起了一個名為 Bootstrap 的框架，融貫許多手機優先的設計模式，模組化了一套CSS框架。
開發者除了能用徒手刻圖的方式打造響應式設計，更多人士選擇使用 CSS 框架，進行快速的響應式網頁開發。
而響應式網頁設計，又可以分為桌機版優先（Desktop First）及手機優先（Mobile first）兩種設計模式。
桌機版優先的響應式設計，是以正常大小的桌機螢幕大小開始著手設計，先設計完桌機螢幕大小的內容，再慢慢往下、較小的載具螢幕大小內容設計。
而手機優先的響應式設計方式則是跟桌機版的相反，主要先從手機大小的螢幕內容設計網頁，再逐步往平板、電腦螢幕進行設計。
這兩種模式沒有孰好孰壞，主要是以開發者及設計師的習慣為主，值得一提的是現今常用的 Bootstrap 5 框架，就是以手機優先所打造出來的CSS框架。
當然並不是只有 Bootstrap 5 採用 mobile first 的概念，最近前端開發者所喜歡的 Tailwind 的響應式設計，也是以手機載具優先作為設計的考量。
對於現在行動載具的盛行，響應式設計不再只是開發者需要知道的設計原理，就算只是企業裡一般的行政職位，可能都會因為公司採買需要，而需要接洽相關的事務。
把 RWD 當作軟體業必懂的 know how 也不為過。
這一篇文章主要是介紹想響應式開發的簡史及設計原理，其他實作層面的技術，我會在其他的章節與大家分享。
其他的網頁技術的問題，或是想要了解更多有關響應式開發的小技巧，歡迎你下方留言跟我討論與交流：）
希望今天的文章有幫助到正在閱讀的你，如果你喜歡我的文章的話，可以留下你的愛心或是收藏我的文章，也或者可以點選「贊助」，你的一杯咖啡絕對是我持續寫下去的動力！或是透過拍拍手，用你小小的行動支持我的創作！
我是Vivian，我們下次見。
關於我：
一名從英文系畢業的前端工程師，喜歡閱讀、寫東西及自我成長。
｜Instagram: Vivian Yeh｜vivian_enlife
｜聯絡我：vivian.enlife@gmail.com
428會員
99內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶，不用腳踩十公分、連妝都可以不用化的職場人生，文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
你可能也想看
Google News 追蹤
Hi 我是 VK~
在 8 月底寫完〈探索 AI 時代的知識革命：NotebookLM 如何顛覆學習和創作流程？〉後，有機會在 INSIDE POSSIBE 分享兩次「和 NotebookLM 協作如何改變我學習和創作」的主題，剛好最近也有在許多地方聊到關於 NotebookLM 等 AI 工具
國泰CUBE App 整合外幣換匯、基金、證券等服務，提供簡便、低成本的美股定期定額投資解決方案。
5分鐘開戶、低投資門檻，幫助新手輕鬆進軍國際股市；提供人氣排行榜，讓投資人能夠掌握市場趨勢。
這是張老師的第三本書，我想前二本應該也有很多朋友們都有讀過，我想絕對是受益良多，而這次在書名上就直接點出，著重在從投資的角度來切入
在建立網站的過程中，網頁設計和網頁開發這兩個術語經常被提及。它們雖然密切相關，但各自涵蓋了網站建設的不同方面，從創造視覺吸引力到實現網站的互動功能。
理解問題，然後拆解，最後解決它。
通常網頁開發的課程流是 HTML - CSS - JavaScript ，
但在 AC 一開始就先淺談 JavaScript ，
就是要先建立運算思維：
在現代網頁製作開發中，單頁應用程式（Single-Page Application，SPA）已經成為一個新興且受歡迎的趨勢。本文將介紹單頁應用程式的概念和優勢，並解釋如何使用JavaScript框架（如React、Angular或Vue.js）來實現SPA。以下是部分項目的概述。
這一篇文章，我想來談談模板語言（template language/engine）。而其中比較有名的為handlebar、pug、ejs。那我會的事後兩著，因此拿這兩個出來寫一篇文章。
Pug
指令：npm install pug
比起 HTML 的語法，pug 語法可以說簡潔很多。
那下面
我們用chrome瀏覽網頁的時候，常常開啟了一些新的網頁，看完關掉網頁後，想要重新再瀏覽一次，卻因為沒有加到書簽裡，可能就找不到了，這時候這個插件就會幫上你的忙！
系統可以回溯開啟100個你曾經關掉的網頁，幫你找回這些網頁資料，應該對你的工作有很大幫助！
📚因果濟世集
🎞片名：【有聲書】亂跑宮廟很危險(五)-亂開網頁、部落格也中槍
📽內文片段：
以下為一位師姐自述，來文照登：
牟尼精舍師兄姐您好，以下是我向精舍問事，勞煩處理干擾的心得，歡迎分享，謝謝。
之前在研究紫微斗數時，偶然發現一個知名的部落客網站在說明紫微斗數。這個部落客與一般人的差異在
一個專業網頁設計的網站經過合適的設計和排版後不但能令人留下深刻印象，能充分突顯你的公司形象, 直接或間接創造收益。而在搜尋器如Yahoo、Google中, 同時以SEO服務令網站的內容更容易搜尋得到,從而提高排名度。
Hi 我是 VK~
在 8 月底寫完〈探索 AI 時代的知識革命：NotebookLM 如何顛覆學習和創作流程？〉後，有機會在 INSIDE POSSIBE 分享兩次「和 NotebookLM 協作如何改變我學習和創作」的主題，剛好最近也有在許多地方聊到關於 NotebookLM 等 AI 工具
國泰CUBE App 整合外幣換匯、基金、證券等服務，提供簡便、低成本的美股定期定額投資解決方案。
5分鐘開戶、低投資門檻，幫助新手輕鬆進軍國際股市；提供人氣排行榜，讓投資人能夠掌握市場趨勢。
這是張老師的第三本書，我想前二本應該也有很多朋友們都有讀過，我想絕對是受益良多，而這次在書名上就直接點出，著重在從投資的角度來切入
在建立網站的過程中，網頁設計和網頁開發這兩個術語經常被提及。它們雖然密切相關，但各自涵蓋了網站建設的不同方面，從創造視覺吸引力到實現網站的互動功能。
理解問題，然後拆解，最後解決它。
通常網頁開發的課程流是 HTML - CSS - JavaScript ，
但在 AC 一開始就先淺談 JavaScript ，
就是要先建立運算思維：
在現代網頁製作開發中，單頁應用程式（Single-Page Application，SPA）已經成為一個新興且受歡迎的趨勢。本文將介紹單頁應用程式的概念和優勢，並解釋如何使用JavaScript框架（如React、Angular或Vue.js）來實現SPA。以下是部分項目的概述。
這一篇文章，我想來談談模板語言（template language/engine）。而其中比較有名的為handlebar、pug、ejs。那我會的事後兩著，因此拿這兩個出來寫一篇文章。
Pug
指令：npm install pug
比起 HTML 的語法，pug 語法可以說簡潔很多。
那下面
我們用chrome瀏覽網頁的時候，常常開啟了一些新的網頁，看完關掉網頁後，想要重新再瀏覽一次，卻因為沒有加到書簽裡，可能就找不到了，這時候這個插件就會幫上你的忙！
系統可以回溯開啟100個你曾經關掉的網頁，幫你找回這些網頁資料，應該對你的工作有很大幫助！
📚因果濟世集
🎞片名：【有聲書】亂跑宮廟很危險(五)-亂開網頁、部落格也中槍
📽內文片段：
以下為一位師姐自述，來文照登：
牟尼精舍師兄姐您好，以下是我向精舍問事，勞煩處理干擾的心得，歡迎分享，謝謝。
之前在研究紫微斗數時，偶然發現一個知名的部落客網站在說明紫微斗數。這個部落客與一般人的差異在
一個專業網頁設計的網站經過合適的設計和排版後不但能令人留下深刻印象，能充分突顯你的公司形象, 直接或間接創造收益。而在搜尋器如Yahoo、Google中, 同時以SEO服務令網站的內容更容易搜尋得到,從而提高排名度。