隨著移動產品的日益豐富，出現了各種屏幕尺寸的手機，Pad等移動設備。如果針對每一種尺寸的設備都獨立開發一個網站，成本會非常高，這時，響應式Web設計應運而生，響應式網頁設計指的是網頁設計應該根據設備環境（屏幕尺寸，屏幕定向，系統平臺等）以及用戶行為（改變窗口大小等）進行相應的響應和調整。

6.6.1響應式Web設計的概念

響應式網頁設計是目前流行的一種網頁設計形式，主要特色是頁面布局能根據不同設備（平板，PC，手機）讓內容適應性的展示，讓用戶能在不同設備都能夠友好地瀏覽網頁內容。從而為不同終端的用戶提供更加舒適的界面和更好的用戶體驗。

6.6.2響應式Web設計相關技術

響應式Web設計是和HTML5+CSS3互相配合與支持的，實現響應式設計包括以下技術點：

1)  HTML5+CSS3的基本網頁設計。

2)  視口(meta)：提供可以配置視口的屬性。

3)  CSS媒體查詢 (Media Queries)：識別媒體類型，特征（屏幕寬度，像素比等）。

4)  流式布局(Fluid Layout)：可以根據瀏覽器的寬度和屏幕的大小自動調整效果。

5)  流式圖片(Fluid Images)：隨流失布局進行相應縮放，可以理解為圖片的流式布局

6)  響應式柵格系統：依賴于媒體查詢，根據不同的屏幕大小調整布局。

7)  彈性盒布局：CSS3的彈性盒布局，一個可以告別浮動，完美地實現垂直居中的新特性。

8)  彈性圖片：指的是不給圖片設置固定尺寸，而是通過設置img{max-width:100%},讓圖片大小自動適應屏幕大小。

實現響應式Web設計，可以說就是根據顯示屏幕大小的變化控制頁面的文檔流，適配不同類型的終端顯示設備。