行動上網越來越普及的情況下，行動裝置的使用率快超越桌上型電腦設備，成為我們生活中最常接觸的3C用品。
手機的螢幕比較小，同樣的內容要在大小迥異的螢幕上都呈現出好的效果，並不容易達成。
所以之前有一做法是，為手機專門做一個獨立版的網頁設計。
這樣做的確是可以達到良好的瀏覽效果，但維護上就變成比較繁雜。
於是響應式網頁(Resposive Web Design)就誕生了。
響應式網頁設計(Responsive web design)，簡稱RWD網頁設計，
只要做一個版本的設計就能通吃所有大小的螢幕，讓網頁適應不同大小的解析度自動調整版型。
有兩個重點要注意，其中一個會比較多瑣碎的要注意。
一、Media Query 引用方式
Media Query 的使用方式有兩種：
1. 在 .CSS 檔案中，用 @media 來判斷使用者螢幕寬度，選擇載入哪一段 CSS。
ex: @media screen and (max-width: 768px){輸入各項設定}
如果使用者之視窗寬度 <= 768px，將會再載入這裡的 CSS，套用此css
ex: @media screen and (min-width:768px) and (max-width:1024px){
輸入各項設定 }
平板裝置(768px<螢幕尺寸<1024px)套用此css
2. 在 HTML 的 載入的地方，用 media 屬性判斷使用者裝置寬度，選擇載入哪一個 CSS 檔案。
ex: <link rel=”stylesheet” type=”text/css” media=”screen and (max-device-width: 768px)” href=”media.css” >
在螢幕小於768px時，套用css
二、Viewport設定
很重要，就算你花很了多時間設定好面的設定，偏偏就是忘了這個，RWD是不會有效果的唷!因為我也犯過這個問題，明明都設好了media的各尺寸設定，但是就是沒有作用，搞了老半天才想到原來我忘了這個沒有打，差點吐血。
就是
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
如果網頁的標頭沒有做這組設定的話，手機會以高解析度來呈現畫面，這就讓字變得很小，使用者還要去做放大而不能直接閱讀。
基本上只要把握上面兩組設定的方式就可以開始製作響應式網頁了。