Responsive web design (RWD)

響應式網頁設計(Responsive Web Design)也可以叫做自適應網頁設計.

在不同解像度下改變網頁頁面的佈局，的讓不同的設備都可以正常瀏覽同一網站，提供視覺最佳化.

簡單的來說就是你可以在不同平台、不同尺寸的裝置(iOS, Android, Windows)都能無障礙的觀看網頁,而不會因為你的設備導致閱讀資訊有所遺漏

為什麼要做自適應網頁 Responsive Web Design？

隨著行動網路的發展以及各種平板、智慧型手機平台的盛行，不只是在台灣，全世界都跟著這個潮流走。每每新手機型號問世,總是有一堆粉絲搶購跟進，行動裝置(手機/平版)螢幕大小日新月異， 而以目前主流裝置的解析度來看，5.5吋1280×720，4.7吋1134 x 750 pixels因此要讓每種裝置都能順暢瀏覽，不只考驗工程師的功力，也非常考驗前端網頁設計的視覺美感，與後端多螢測試的耐性。

自適應網頁設計的主要核心技術是css3 media query，在CSS3中我們可以設置不同類型的媒體條件，並根據對應的條件，給相應符合條件的平台媒體調用相對應的樣式表。

這裡有一個範例蒐集的網站，網站名稱就叫做「Media Queries」

網址：http://mediaqueri.es/。你可以用你的推特帳號登入並且送出您的網站供別人票選

要如何做自適應網頁 Responsive Web Design?

首先我們必須了解.RWD其實是利用CSS去規範網頁的版面大小呈現方式.但請注意

• 支援狀況：除 IE8 以下不支援 外，其餘較新款瀏覽器接皆支援（詳細支援狀況：http://caniuse.com/css-mediaqueries）

所以我們必須建立網站導入時載入的CSS
我的習慣是建立一個名叫responsive.css的檔案,當然裡面就是寫我們的Media Queries

下面就是示範內容

PS:現在看起來好像很簡單,好像只要把相對應的裝置寬度設定好.只要切換到相符的裝置就會自動呼叫CSS
其實還有很多小細節藏在裡面.

1.因為裝置的種類很多我們不可能針對每個裝置解析度寫出適合的CSS規範
2.寫出來的responsive.css可能長的有點離譜.導致載入時間過長.電腦負擔過大(可以把他分開寫a.css/b.css等)

Media Queries 可以讓你能夠在不同裝置或解析度上做調整，但是每個人的網站格式並不相同所以還是要看 CSS如何去編寫比較重要了