RWD 是什麼？響應式網頁RWD 教學入門｜ALPHA Camp Blog

RWD（Responsive Web Design）中文翻作「響應式網站設計」，是一種為了讓網頁在各種尺寸的裝置下，畫面都能呈現合適比例的設計原則。

有一種更容易理解RWD ... Loading...首頁課程內容系列課程JavaScript全端開發課程學期一｜程式設計入門學期二｜掌握網頁開發學期三｜軟體工程師養成全年開課時間表最新消息非本科跨領域學程式最新課程DATA&AI公開課SQL14天入門課學習體驗成效Blog技術主題求職攻略數據入門文章首頁FAQ常見問題關於ALPHACamp加入我們💰學習優惠零基礎挑戰跳級挑戰萬元獎學金馬上報名Web技術RWD是什麼？響應式網頁RWD教學入門Posted on 2019-09-12  by    byDez在學習網頁前端開發時，不可避免地一定會常聽到RWD這個詞，可能隱約也講的出像是「什麼響應式的」、「一種網頁設計方式」、「手機也可以用的網頁」的概念，但仍舊有些一知半解。

本文將嘗試用簡單的方式，重新整理各種RWD相關的資訊，由淺入深來介紹RWD。

入門網頁設計，3分鐘小測驗，找到你的學習起點RWD基本概念RWD（ResponsiveWebDesign）中文翻作「響應式網站設計」，是一種為了讓網頁在各種尺寸的裝置下，畫面都能呈現合適比例的設計原則。

有一種更容易理解RWD概念的比喻是「內容就像水」。

當你在設計網站排版時，能根據RWD的設計原則實作，網站內容就會像水一般，在各種裝置中自然的流動成最適當的樣子。

上圖以Medium為例，當你試著調整視窗寬度時，會發現網頁內容隨著寬度變小而變換版面，我們就可以說這個網站符合RWD的設計原則。

為什麼要用RWD近幾年隨著行動網路的取得越來越方便，更多的使用者開始使用各種不同裝置來上網。

許多網站因應這樣的趨勢將服務面向使用手持裝置的使用者，除了將網站服務另外開發成手機APP、使用行動版網站（像是Facebook手機版）等，但這些方法都需要較大的成本去維護。

而RWD這樣單純使用CSS媒體查詢控制版面的設計方式，不管什麼裝置都在同一個網站上開發，在維護及成本的考量上就具有相對大的優勢，且在分享、搜尋排名上也都比一般行動版網站來得好。

進一步學好前端基礎，申請5天免費試讀RWD基本實作方法要將網頁使用RWD實作有以下幾步設定與做法：設定viewport決定RWD設計模式套用CSSmediaquery使用相對單位設定寬高、大小1.設定viewportviewport（檢視區）指的就是瀏覽網頁時瀏覽器顯示畫面內容的區域。

而在針對要實作RWD的網頁中，HTML的head部分必須設定viewport，舉例像是：

CODE:https://gist.github.com/DezChuang/96aead3ed2802e25a65dba99817dd66a.js

這個設定可指示瀏覽器如何控制網頁的大小和縮放。

2.決定RWD設計模式再來最重要的一步，就是要決定網頁內容在不同viewport下的版面如何配置、流動。

在RWD中有五種比較常用的設計模式：局部流動(mostlyfluid)、欄內容下排(columndrop)、版面配置位移(layoutshifter)、細微調整(tinytweaks)和畫布外空間利用(offcanvas)。

下一個段落會針對其中幾種設計模式做深入介紹。

3.套用CSSmediaquery我們都知道版面配置主要是CSS的工作，所以在RWD中為了要在不同螢幕寬度做不同的CSS樣式調整，就需要使用CSS3中提供的mediaquery語法。

mediaquery基本的寫法舉例如下。

例如我們要針對「螢幕尺寸在600px以上時，對

設定字體大小為20px」：

CODE:https://gist.github.com/DezChuang/a0f34d30950cde9f62867479ed3dbca8.js

這邊的min-width:600px就是我們的篩選條件，所有在「螢幕尺寸600px以上」的CSS內容都可以寫在這個scope中。

因此我們可以使用mediaquery的寫法，順利的達到在各種尺寸下設定我們期待的樣式，不論是圖片大小、字體大小、容器寬高等。

4.使用相對單位設定寬高、大小最後要注意在不同尺寸的CSSmediaquery中，內容的寬高、大小，大多會使用「相對單位」來設定，像是width:50%、width:100vh、height:80vh、font-size:2em等，如此才能在該範圍的viewport中達到RWD的效果。

RWD設計模式上面提到的RWD設計模式，以下針對mostlyfluid、columndrop這兩種最常見的設計模式做基本介紹：局部流動（mostlyfluid）（圖片來源）mostlyfluid在小尺寸螢幕時，內容會以垂直堆疊的方式排列；隨著螢幕尺寸變大時，內容會流動成多欄的方式，直到達到某個尺寸後，將內容置中並停止流動。

這裡提供CodePen範例demo，其中mediaquery的設定如下：

CODE:https://gist.github.com/DezChuang/b58e333347c0da4ad553fff9a2b6a615.js

欄內容下排（columndrop）（圖片來源）columndrop在大尺寸時會以多欄版面配置，隨著視窗寬度變窄時，內容會垂直堆疊所有欄。

這裡提供CodePen範例demo，其中mediaquery的設定如下：

CODE:https://gist.github.com/DezChuang/bd2a4ad264d08af275149ff56f2598cb.js

RWD實作工具最後再簡列出現今實作RWD開發時，幾個常用的佈局系統與框架，這些工具都可以加速RWD的開發效率：FlexboxGrid使用CSS框架實作RWD，例如BootstrapBootstrap是什麼？給網頁設計新手的Bootstrap4入門教學結語隨著使用手持裝置上網已經是瀏覽網站的趨勢，RWD可以說是學習網頁前端切版時一個不可或缺的技能。

本文簡要的介紹關於RWD的基本概念、重要性、實作方法、設計模式、實作工具，期待能帶給對RWD尚不太熟悉的開發者一些啟發，進而去利用RWD這個概念去開發網頁，提供更好的設計與體驗給使用者。

參考資料GoogleWeb回應式網頁設計基礎GoogleWeb回應式網頁設計GoogleWeb回應式網頁設計模式延伸閱讀ResponsiveWebDesign:50ExamplesandBestPractices學習CSS版面配置-flexboxACompleteGuidetoFlexbox深入解析CSSFlexbox 更多技術學習資源 前端 JavaScript|HTML/CSS|Bootstrap|RWD|DOM|API|AJAX|Postman|jQuery 後端 HTTP/HTTPS|Node.js|MongoDB|Git|SQL/NoSQL|Docker|React 其他 VSCode|WebApp|Leetcode ‍Dez四年軟體開發經驗。

以前在學時也曾是程式苦手，能理解初學程式時撞牆期的痛，期待能以淺顯易懂的方式引導與解惑。

曾是系統廠韌體工程師，因為對純軟產業有興趣，靠自學轉職為網頁前端工程師。

喜歡分享與思考職涯方向，有任何問題或想討論的內容，都歡迎透過下列方式與我聯絡哦！SeeAllPost前端Search熱門搜尋自學程式學習方法學習教練助教跨領域職涯軟體工程師前端全端AllCategoriesAC動態AC評價Web技術人物專訪程式學習自學能力資料科學軟體職涯FollowUs延伸閱讀更多好文章推薦給你！Web技術身為前端工程師，如何與時並進：前端技能樹的演進史Web技術Mongodb教學：從安裝到啟動基本操作教學Web技術React是什麼？給新手的React入門Web技術React教學，系統性學習React的步驟Web技術CSS教學：認識語法規則與基本功Web技術演算法(Algorithm)是什麼?演算法應用的例子與場景Web技術助教開講活動回顧：網頁開發必學技巧不藏私公開Web技術LeetCode解題的思考策略，刷題的4個階段ALPHACamp的使命是「幫助人們發展有意義、有價值的職涯」。

自2014年以來，我們以新加坡和台灣為教學據點，培訓超過6500名學員。

校友遍及台灣、新加坡、中國、以及全球的科技新創。

JavaScript全端開發課程三學期系統化課程設計學期一：程式設計入門學期二：掌握網頁開發學期三：軟體工程師養成最新課程New數位職涯RPGDATA&AI公開課SQL14天入門課LearnMore非本科跨領域學程式理工科職涯升值挑戰學習體驗成效Blog技術主題職涯攻略常見問題關於ALPHACamp加入我們ContactUsEmail：[email protected]電話：+886-2-2546-9766（※防疫期間AC採遠距上班，如需聯繫請來信或FB私訊）地址：105台北市復興北路201號6樓之4獲取最新資訊業界經驗分享、職涯諮詢、學習技能提升！訂閱電子報ALPHACamp｜創新職涯的線上學校©2022AllRightsReserved