【網頁開發】什麼是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
430會員
100內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶，不用腳踩十公分、連妝都可以不用化的職場人生，文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
你可能也想看
Google News 追蹤
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
響應式網頁設計（RWD）是一種網頁設計方法，其核心在於根據不同的裝置特性來自適應地調整網頁的佈局、圖片和文字等元素，確保各種裝置上提供最佳的瀏覽體驗。RWD的重要性體現在於能夠一站式解決多種裝置的兼容問題，提高用戶滿意度，節省開發和維護成本。
隨著科技的不斷發展，網頁設計已經從過去的靜態頁面演變為充滿動態、互動性和個性化的體驗。本文介紹了網站設計的最新趨勢，包括夜間模式、無障礙設計、響應式設計、聊天機器人和虛擬助手等功能。
作為一個非常不專業的前端初學者，有陣子常常卡在公司官網，要插入 Youtube 影片無法RWD(響應式)的問題。
跟不熟悉 網頁技術的朋友們介紹，RWD 就是指網頁的排版能跟著螢幕的大小縮放、變化編排，在這個人手一機的時代，特別重要。
RWD（適應性網頁設計）不僅能提高使用者體驗，還對SEO有深遠影響。透過提升使用者體驗、減少重複內容、加快頁面載入速度、符合移動優先索引和簡化網站管理，RWD設計能顯著提升網站在搜尋引擎中的排名。
響應式網頁設計（Responsive Web Design, RWD）已成為現代網站開發不可或缺的一部分。響應式設計不僅能夠確保網站在各種設備上都能提供良好的用戶體驗，而且對於搜索引擎優化（SEO）也有著重要的影響。本文將探討響應式設計的最新技術、其對SEO的優勢以及一些成功的實際案例。
In the era of mobile technology, responsive web design is not just an option but a necessity for any website.
早期，在我出紙本書的年代，已經開始有人在講電子書的事情了，不過當時的我並沒有很在意。一來，對它不夠熟悉；再來，當時網路還是撥接的年代，誰會在網路上看書？我心底打很大的問號。隔了這麼多年，隨著網路的躍升、軟硬體設備的改善，加上各家平台興起，「電子書」不再只是網路上看的書，還有閱讀器的誕生。
響應式網頁設計（Responsive Web Design，簡稱RWD）是一種設計和開發網頁的方法，旨在使網站能夠根據不同設備和屏幕尺寸的大小，自動調整和適應其外觀和佈局。這種設計方法的目的是提供一致的用戶體驗，無論用戶是在桌面電腦、平板電腦還是手機等設備上訪問網站。
前幾天發現自己已經是中華電信十幾年老客戶，意識到自己從智障型手機晉升到智慧型手機已十幾年，讓我想起以前國中小的時候，聯絡彼此除了透過書寫和家用電話，我們會去朋友家拜訪，補完習回家，建立不只是我們的關係，更是幾家人的關係。當時最Fashion的手機是掀蓋式還能編輯鈴聲的那種，只要有人手機鈴聲是流行歌曲
在數位時代，網頁設計變得更加重要。這篇專欄文章將帶你深入探索網頁設計的世界，涵蓋網頁設計的基礎知識、技巧和最佳實踐，幫助你瞭解設計的價值和重要性。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
響應式網頁設計（RWD）是一種網頁設計方法，其核心在於根據不同的裝置特性來自適應地調整網頁的佈局、圖片和文字等元素，確保各種裝置上提供最佳的瀏覽體驗。RWD的重要性體現在於能夠一站式解決多種裝置的兼容問題，提高用戶滿意度，節省開發和維護成本。
隨著科技的不斷發展，網頁設計已經從過去的靜態頁面演變為充滿動態、互動性和個性化的體驗。本文介紹了網站設計的最新趨勢，包括夜間模式、無障礙設計、響應式設計、聊天機器人和虛擬助手等功能。
作為一個非常不專業的前端初學者，有陣子常常卡在公司官網，要插入 Youtube 影片無法RWD(響應式)的問題。
跟不熟悉 網頁技術的朋友們介紹，RWD 就是指網頁的排版能跟著螢幕的大小縮放、變化編排，在這個人手一機的時代，特別重要。
RWD（適應性網頁設計）不僅能提高使用者體驗，還對SEO有深遠影響。透過提升使用者體驗、減少重複內容、加快頁面載入速度、符合移動優先索引和簡化網站管理，RWD設計能顯著提升網站在搜尋引擎中的排名。
響應式網頁設計（Responsive Web Design, RWD）已成為現代網站開發不可或缺的一部分。響應式設計不僅能夠確保網站在各種設備上都能提供良好的用戶體驗，而且對於搜索引擎優化（SEO）也有著重要的影響。本文將探討響應式設計的最新技術、其對SEO的優勢以及一些成功的實際案例。
In the era of mobile technology, responsive web design is not just an option but a necessity for any website.
早期，在我出紙本書的年代，已經開始有人在講電子書的事情了，不過當時的我並沒有很在意。一來，對它不夠熟悉；再來，當時網路還是撥接的年代，誰會在網路上看書？我心底打很大的問號。隔了這麼多年，隨著網路的躍升、軟硬體設備的改善，加上各家平台興起，「電子書」不再只是網路上看的書，還有閱讀器的誕生。
響應式網頁設計（Responsive Web Design，簡稱RWD）是一種設計和開發網頁的方法，旨在使網站能夠根據不同設備和屏幕尺寸的大小，自動調整和適應其外觀和佈局。這種設計方法的目的是提供一致的用戶體驗，無論用戶是在桌面電腦、平板電腦還是手機等設備上訪問網站。
前幾天發現自己已經是中華電信十幾年老客戶，意識到自己從智障型手機晉升到智慧型手機已十幾年，讓我想起以前國中小的時候，聯絡彼此除了透過書寫和家用電話，我們會去朋友家拜訪，補完習回家，建立不只是我們的關係，更是幾家人的關係。當時最Fashion的手機是掀蓋式還能編輯鈴聲的那種，只要有人手機鈴聲是流行歌曲
在數位時代，網頁設計變得更加重要。這篇專欄文章將帶你深入探索網頁設計的世界，涵蓋網頁設計的基礎知識、技巧和最佳實踐，幫助你瞭解設計的價值和重要性。