什麼是響應式網頁設計? 什麼是 RWD?
非響應式的網站不管在什麼裝置版型皆為固定的，而響應式網頁是指同個網站透過 CSS3 去判斷當前螢幕解析度，自適應地切換桌面版和行動版的版型，使網頁不再僅限於單欄式的設計或固定的版型。
基本環境建立
各個裝置的螢幕解析度和載具寬度皆不同，為了在各個裝置可以自動調整畫面，響應式網頁會加入下列程式碼 :
<head> 加入程式碼width=device-width: 瀏覽器顯示寬度 / 螢幕解析度 = 載具(裝置)的寬度initial-scale=1: 縮放比為 1viewport主要是因為智慧型手機顯示網頁時畫面較小的問題，而為了解決這問題 W3C 在 HTML 制定了專門的標籤語法，viewport 另外還有以下這些參數 :
CSS3 Media Query 觀念
@ media(max-width: __ px) : 是 CSS3 的語法，平常並不會生效，當解析度等於特定的設定時，語法才會被開啟，並蓋掉原先的語法
一般來說，透過 max-width的設定，可以先從 PC 開始設計樣式，漸漸針對 tablet、mobile 設定。
上圖範例是指，在一般 PC 狀態時 .title 的文字為紅色，而當螢幕解析度寬度小於等於 768px 時，.title 文字為藍色的設定則會被套用。
下方加上圖片說明 :
max-width 是指最大寬度，因此當小於等於最大寬度時會被套用設定；反之，min-width 則是指最小寬度，因此當大於等於最小寬度時會被套用設定。 (如果一開始是設計 moblie 的版本，則可利用 min-width 漸漸往 tablet、PC 設計 )
如果覺得我的文章寫得不錯或是有幫助到你，可以拍手讓我知道，對我來說是很大的鼓勵，謝謝:)
