Web前端培訓(xùn)：響應(yīng)式Web設(shè)計(jì)簡介

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

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

　　1.一套設(shè)計(jì)，多處使用

　　如果要找一個(gè)成本、設(shè)計(jì)、性能的平衡點(diǎn)，響應(yīng)式設(shè)計(jì)是最好的選擇。響應(yīng)式Web設(shè)計(jì)可以做到一套設(shè)計(jì)，響應(yīng)多種屏幕。

　　2.移動優(yōu)先

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

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

　　響應(yīng)式Web設(shè)計(jì)有哪些相關(guān)技術(shù)?

　　響應(yīng)式Web設(shè)計(jì)是和HTML5+CSS3互相配合與支持的，實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)包括以下技術(shù)點(diǎn)：

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

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

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

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

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

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

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

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

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