Web前端培訓：響應式Web設計簡介

　　響應式Web設計(Responsive Web Design)是由Ethan Marcotte在2010年提出的，其目標是要讓設計的網(wǎng)站能夠響應用戶的行為，根據(jù)不同終端設備自動調整尺寸。

　　從設計理念看，響應式Web設計是一種針對任意設備都可以對網(wǎng)頁內容進行完美布局的顯示方式，與原始設計方式相比有兩點突破：

　　1.一套設計，多處使用

　　如果要找一個成本、設計、性能的平衡點，響應式設計是最好的選擇。響應式Web設計可以做到一套設計，響應多種屏幕。

　　2.移動優(yōu)先

　　之前的網(wǎng)站開發(fā)大多數(shù)是先開發(fā)PC端，再根據(jù)PC端的網(wǎng)頁及功能設計開發(fā)移動端。然而，隨著互聯(lián)網(wǎng)行業(yè)的發(fā)展，使用移動端上網(wǎng)的用戶群早已經趕超PC端。由于移動端設備的屏幕小，計算資源低，如果先開發(fā)移動端，可以迫使開發(fā)人員在屏幕更小、計算資源更低的設備中設計產品功能。這樣做，一是可以使產品的功能更加核心和簡潔，二是有助于設計出性能更高的程序。

　　從用戶體驗方面來看，通常網(wǎng)站會在移動瀏覽器上縮放，這樣雖然可以完整地呈現(xiàn)給人們想要瀏覽的內容，但鑒于移動設備屏幕大小的限制，過多的內容會使頁面看起來雜亂不堪，用戶也很難找到自己關注的內容。而響應式Web設計并不是將整個網(wǎng)頁縮放給用戶，而是經過精心篩選，有選擇性地顯示頁面的內容。

　　響應式Web設計有哪些相關技術?

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

　　(1)HTML5+CSS3的基本網(wǎng)頁設計。

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

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

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

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

　　(6)響應式柵格系統(tǒng)(Responsive Fluid Grid)：依賴于媒體查詢，根據(jù)不同的屏幕大小調整布局。

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

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

　　實現(xiàn)響應式Web設計，可以說就是根據(jù)現(xiàn)實屏幕大小的變化控制頁面的文檔流。