什麼是響應式 Web 設計?

響應式 Web 設計網頁應該根據裝置的大小自動調整內容。
響應式 Web 設計只使用 HTML 和 CSS。
響應式 Web 設計不是一個程式或Javascript指令碼。

Viewport

是使用者網頁的可視區域。

網格檢視

響應式網格檢視通常是 12 列，寬度為100%，在瀏覽器視窗大小調整時會自動伸縮。

1. 建立響應式網格檢視
   首先確保所有的 HTML 元素都有 box-sizing 屬性且設定為 border-box。
   確保邊距和邊框包含在元素的寬度和高度間。
   新增程式碼： * { box-sizing: border-box;}

圖片

1. 使用 width 屬性
   如果 width /max-width屬性設定為 100%，圖片會根據上下範圍實現響應式功能

2. 背景圖片
   如果 background-size 屬性設定為 “contain”, 背景圖片將按比例自適應內容區域。圖片保持其比例不變：
   如果 background-size 屬性設定為 “100% 100%” ，背景圖片將延展覆蓋整個區域：
   如果 background-size 屬性設定為 “cover”，則會把背景影象擴充套件至足夠大，以使背景影象完全覆蓋背景區域。注意該屬性保持了圖片的比例因此 背景影象的某些部分無法顯示在背景定位區域中。

3. 不同裝置顯示不同圖片
   大尺寸圖片可以顯示在大螢幕上，但在小螢幕上確不能很好顯示。我們沒有必要在小螢幕上去載入大圖片，這樣很影響載入速度。所以我們可以使用媒體查詢，根據不同的裝置顯示不同的圖片。