或許你曾經遇過在瀏覽某些企業網站或是購物網站時，在電腦上跟在手機上的版面比例不一樣，不是整個版面被裁切看不到圖片、圖片和字體都顯得非常小，就是操作起來非常不順手，導致最後就直接退出頁面了。
什麼是 RWD 響應式設計 ？ 為何網站需要 RWD 響式應功能？
而RWD 響應式設計，就是頁面會隨著你使用的行動裝置而有所不同自動調整至最適合的頁面
#超級白話就是你用手機看網頁版面不會再跑掉
＃支援任何裝置
這就是『RWD響應式設計』
響應式網頁呈現視覺感
為什麼會有ＲＷＤ響應式設計？
因應科技發展快速與時代的變化，現在人手一機的時代，有80%的人用手機搜尋、瀏覽您的網站、購物，加上平板普及化，有越來越多不同大小的螢幕出現，而導致網頁無法正常顯示的問題。
從早年用電腦逛奇摩拍賣到現在下班都直接用手機逛蝦皮購物，如果沒有重視手機上的網站呈現效果，可能會流失相當多的潛在客戶，一個符合使用者便於瀏覽跟操作的網站是必須的。
而RWD響應式設計網頁就是可以讓你可以在桌機、筆電、平版、手機等不同尺寸螢幕瀏覽
RWD響應式設計的專業
響應式網頁設計(Responsive Web Design)簡稱RWD，又稱適應性網頁、響應式網頁設計、回應式網頁設計、多螢網頁設計，這是一項開始於2011年由是國外頂尖設計師Ethan Marcotte所提出的概念。
2012年後被公認為是日後網頁設計開發技術的趨勢，而其原理就是透過語法給予指令，運用 HTML5 、 CSS3 等程式語言的運用，實際上的運作方式，會針對不同的尺寸來為網頁設定中斷點，由大到小將網頁的尺寸劃分成許多區間，每個區間都會設定適合的版面，隨著瀏覽器的尺寸變化時，網頁就會套用不同的 CSS 設定，讓版面隨之調整，讓網站能夠自適應，就能夠完美的符合裝置與瀏覽器的大小，提供最佳的視覺體驗
就好像水裝在不一樣的容器中，就會變成不一樣的形狀的概念。
與GOOGLE的密切關係
2014年11月，全球搜尋引擎龍頭Google搜尋演算法經歷一次重大的改變。
新的搜尋結果將讓那些行動裝置上體驗良好網站，擁有優先排序的優勢，而RWD響應式網站設計，就是Google口中良好體驗的網站。
響應式網站適合在不同的裝置平台上查看，手機、平板、筆電、桌電......都適用，能自動呈現適合的尺寸與網頁樣式。輕鬆提升網站排名，增加訪客數量。
#就像去一間餐廳不管是服務、餐點、獲得良好體驗滿足CP值你才會變成忠實顧客
Google SEO方面已經是一個標配，Google叫這個Mobile Friendliness / Mobile SEO優化。
整體來說讓網站的所有頁面都做到響應式設計，即讓用戶在任何屏幕大小設備中都能清楚看見所有網頁內容的話，就能更有效吸引Google自然搜尋流量的其中一個重要因素。
響應式網站的優缺點
優點：
1.開發成本較低-解決多種裝置的瀏覽的問題，僅需製作一個網站的費用。
2.方便維護網站內容-僅需管理一個網站，人力管理成本也同步節省。
3.提升網站行銷成效-重複內容對於搜尋引擎來說是一大問題，容易影響到網頁在搜尋引擎上的排名，運用 RWD 網頁設計就可以徹底避免因為版本差異，而產生的重複內容。
4.支援跨平台裝置-任何裝置上都可以使用，分享網頁也方便許多，當使用者分享網站時，有時候會因為別的使用者開啟網站的裝置不同，而得不到好得瀏覽效果；RWD 只有一個網站，分享網址也只一個，就不會有這些問題產生．
5. 視覺形象一致，加強瀏覽者對網站的印象-不用一直忙著縮小放大拖曳，方便使用者瀏覽就會增加使用者停留時間，也增加下單機率。
缺點：
１．網站數據容量可能較大，影響網站載入速度較慢、時間較長，可能會有延遲的狀況發生
２．比較起純手機版網站，RWD 載入的內容是完整電腦版的網站，在手機瀏覽時是將多餘的內容資訊給隱藏起來，因此網站載入所花費時間較為長，手機使用者感覺更是明顯；但這問題在開發人員努力優化下及行動裝置、網站速度進步下已慢慢被解決。由於多裝置共用網頁，不適合較複雜的功能介面，這是所有小尺寸螢幕共同的缺點，礙於螢幕空間有限、行動裝置只有觸碰功能的先天限制，因此較不易將 RWD 拿來開發某些適用於「桌機或筆電」的網頁功能
３．不支援太老舊的瀏覽器-由於 RWD 是採用最新的 HTML5 + CSS3 網頁技術來處理，因此有些較舊的瀏覽器可能不能相容。使用版本過時的瀏覽器來觀看，可能會產生版面破壞的情形。不過這問題隨著微軟放棄 IE10 以下版本而得到了解放，現在多數的瀏覽器都已支援 HTML5，如有不相容問題出現，可以建議使用者升級、更新瀏覽器。
響應式網頁設計 VS 手機版網站
我想有人會有疑慮，響應式網站跟手機版網站不是一樣的東西嗎
「RWD網站」與「手機版網站」兩者是不一樣的。
以上兩種規格的網站都是為了解決因為較小解析度的瀏覽裝置(例如智慧型手機、平板電腦…等)在瀏覽網頁時的不便而衍生的網站建置方案。
RWD響應式網頁設計(Responsive Web Design)主要是讓網頁可以自動随著不同的解析度而自動調整網頁的大小及配置方式以方便瀏覽者閱讀網頁，瀏覽者無論是用較大的瑩幕(如桌上型電腦、筆電)或較小的行動裝置(如手機或平板)都可以輕易的閱讀RWD格式的網頁。
「手機版」的網站，顧名思義就是只適合以手機這種較小解析度的瀏覽裝置來閱讀，由於手機及行動裝置受限於螢幕視窗不夠大，會有閱讀困難的問題，當然您也可以使用較大解析度的電腦或筆電來閱讀，只是所呈現的畫面寬度較小，而造成整體看起來較不便利也不美觀。
手機版網站與響應式RWD網站詳細的比較
-
手機版網頁
將同一個網站分為兩個完全獨立的版本，正常版本和手機版。
兩個版本分別有自己獨立的網址區分，通常是正常網站www.example.com 和，手機版網站 m.example.com
那個ｍ就是mobile，流動的意思。
然後根據你用手機或桌機去瀏覽，就會導向用戶去相應的網站版本。
這種是智能手機剛剛出來沒多久後的解決方法【用兩套代碼建造／一個網站做兩次。
簡單來說，手機版網站在其他非智慧型手機的瀏覽裝置下，視覺效果及介面可能都是非常不理想的。
隨著時代演變，平板電腦開始盛行、大型的Smart TV等，手機版網頁的做法無法符合需求，無法因為幾個裝置就做幾個網站，做完以後還要管理代碼，那就有多個代碼...。
大部分的手機版網站都是獨立的後台來管理網頁資料，而獨立的後台設計大部分會衍生下列幾種問題：
維護成本較高：
因為不同的後台，大部分都是獨立的資料庫來控制網站的資訊。也就是說，在官方網站上更新的網頁資料，您也必須到手機版再更新一次，對於管理成本來說相對較高。
資訊不同步：
在舊有電腦版的網頁架構下，可能有些功能是無法快速移植或重新設計的，所以可能在手機版上就會捨棄部分電腦版上部分的資訊與功能。
當然，這樣的捨棄或多或少的會造成部分使用者的不便，不過也因為過度時期而必須要先接受『資訊不同步』的問題。
-
響應式RWD網頁
無論是手機，平板電腦，桌上電腦，可以只用一套代碼來完成。
網址方面是用同一個網址，無需像手機版網頁那麼需要有兩個網址，用戶用正常網址www.example.com時，網站就能自動調整網站顯示方式去適應該裝置尺寸。
開發者在寫網站，和管理方面也就輕鬆得多。也就是為甚麼手機版網站現在已經幾乎不復存在
2021年的現在，科技只會越來越進步，各種方案就是為了解決以往遇到的問題
希望這次的專題能夠幫助你更了解網站相關知識囉！
