隨著行動上網的普及，越來越多的人使用手機上網。
行動裝置的使用率以及黏著度正在超越桌上設備，成為我們日常生活中最常接觸的3C用品。於是網頁設計產業面對了一個難題，如何才能在不同大小的行動設備上，完美的呈現網頁的內容呢？

手機的螢幕比較小，目前最大的Note解析度是在640px，而ipad則是在980左右，電腦寬螢幕尺寸是1920。同樣的內容要在大小迥異的螢幕上都呈現出好的效果，並不是一件容易達成的任務。
有一派的解決方式是為不同的裝置提供不同的網頁，如專門做一個獨立的手機版網頁設計。這樣做的確是可以達到良好的瀏覽效果，但維護上就必須操作複數本版。於是自適應網頁(Resposive Web Design)就誕生了。

響應式網頁設計(Responsive web design),又稱自適應網頁設計、google稱回應式網頁設計，是一個犧牲載入速度的手機網頁解決方案，

只做一個版本的設計就能通吃所有大小的螢幕，讓網頁適應不同大小的解析度自動調整排版。

CSS3 Media Query
響應式網頁設計的主要核心技術是css3 media query，說穿了就是讓不同解析度去套用不同的css設定(看起來很簡單，但會真的實作起來要注意的雜事很多)。