響應(yīng)式頁(yè)面相信大家都不陌生了，在當(dāng)今的互聯(lián)網(wǎng)世界幾乎隨處可見。今天跟大家分享一下響應(yīng)式頁(yè)面布局的原理和基礎(chǔ)知識(shí)，希望大家對(duì)響應(yīng)式頁(yè)面有個(gè)較為全面的把握。

原理

隨著顯示終端設(shè)備的多樣化，出現(xiàn)了各種尺寸的屏幕。而傳統(tǒng)的網(wǎng)頁(yè)主要針對(duì)桌面電腦而設(shè)計(jì)和制作的，電腦顯示器屏幕雖然也有多個(gè)規(guī)格，但相對(duì)固定，頁(yè)面內(nèi)容區(qū)的版塊寬度一般也設(shè)置為980px。而移動(dòng)互聯(lián)網(wǎng)的發(fā)展，各種屏幕的手機(jī)、pad等出現(xiàn)后，情況變得復(fù)雜，但是畢竟移動(dòng)是趨勢(shì)，為了給移動(dòng)端查看網(wǎng)頁(yè)更好的體驗(yàn)，必須做適合于移動(dòng)端設(shè)備的頁(yè)面。

那么怎么建設(shè)響應(yīng)式頁(yè)面布局呢？

一個(gè)方法是為不同的設(shè)備專門制作對(duì)應(yīng)的網(wǎng)站：當(dāng)用戶訪問的時(shí)候，還是訪問PC的域名，然后識(shí)別用戶的設(shè)備，跳轉(zhuǎn)到對(duì)應(yīng)的專門移動(dòng)端頁(yè)面，這也就是很多網(wǎng)站m.域名的由來(lái)。另一個(gè)方法是，和PC同樣的頁(yè)面，當(dāng)用戶訪問的時(shí)候，不根據(jù)用戶的設(shè)備類型，而是根據(jù)用戶的設(shè)備的屏幕大小，然后對(duì)頁(yè)面應(yīng)用與PC端不同的樣式，使這個(gè)頁(yè)面在這個(gè)設(shè)備上看起來(lái)像是為移動(dòng)端專門做的頁(yè)面，這就是現(xiàn)在流行的響應(yīng)式頁(yè)面設(shè)計(jì)——Responsive Design。

兩種方法的優(yōu)劣顯而易見。第一種方法開發(fā)、運(yùn)營(yíng)、推廣各種成本幾乎就double了，但可以提供更為專業(yè)的移動(dòng)端體驗(yàn)，所以說(shuō)，除非這個(gè)網(wǎng)站盈利夠大，要求很高，而且主要是有錢，可以這么干。第二種方法就是兩個(gè)字——省事，就是編寫一個(gè)頁(yè)面，適應(yīng)所有設(shè)備。

下面開始介紹這種省事又酷炫的方法。

基礎(chǔ)

meta標(biāo)簽設(shè)置視口（viewport）

首先說(shuō)說(shuō)viewport，也就是移動(dòng)開發(fā)中經(jīng)常提及的viewport，當(dāng)然移動(dòng)設(shè)備的viewport還涉及到物理像素和邏輯像素的問題，在此不做更深的討論。總之，這個(gè)viewport是指網(wǎng)頁(yè)瀏覽器（不管是PC還是移動(dòng)端）中呈現(xiàn)網(wǎng)頁(yè)的區(qū)域，站在用戶的角度來(lái)說(shuō)，就是用戶能看到的地方。正常來(lái)說(shuō)，這個(gè)視口的寬度和設(shè)備寬度（屏幕寬度）是一樣的，但也有例外，比如當(dāng)你縮放拖拽瀏覽器的時(shí)候，視口也會(huì)隨之變化（這也是個(gè)檢查頁(yè)面是響應(yīng)式效果的小竅門）。

視口的寬度獲取是響應(yīng)式設(shè)計(jì)的基礎(chǔ)，響應(yīng)式頁(yè)面的響應(yīng)也就是響應(yīng)視口寬度的變化。那該如何準(zhǔn)確獲取視口寬度呢？

兩種思路。

一種是用JS獲取并且修改CSS。但這種方法除了有js無(wú)法使用的風(fēng)險(xiǎn)，更主要的是結(jié)果并不是我們想要的。通過(guò)document.documentElement.clientWidth獲得的設(shè)備寬度是廠家設(shè)置的寬度（也就是豎屏?xí)r候的寬度），也就是當(dāng)橫屏的時(shí)候，js獲取的還是原來(lái)的寬度，這就是實(shí)際情況不符了。

另外一種方式是通過(guò)設(shè)置HTML meta標(biāo)簽來(lái)約束視口，其實(shí)是控制瀏覽器如何來(lái)渲染網(wǎng)頁(yè)。代碼為：

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />

其中“width=device-width”設(shè)置視口為設(shè)備寬度，“initial-scale=1.0”設(shè)置初始化的視口大小是1.0倍

“maximum-scale=1.0”規(guī)定允許放大的最大倍數(shù)是1倍，“user-scalable=no ”不允許縮放視口，這樣保證了與設(shè)備顯示寬度一致。

CSS媒體查詢（Media Query）

CSS媒體查詢是響應(yīng)式頁(yè)面的核心所在，主要功能是對(duì)不同的寬度做出不同的CSS動(dòng)作（響應(yīng)），并將這種動(dòng)作告知瀏覽器。媒體查詢的語(yǔ)法是@Media 和 and操作符，分別查詢?cè)O(shè)備類型和設(shè)備屬性。比如

@media screen and (min-width:900px){

body{background-color:blue}

}

意思是對(duì)所有的屏幕，當(dāng)寬度大于等于（最小寬度）為900px的時(shí)候，應(yīng)有此樣式。比如設(shè)備寬度為980px的時(shí)候，body的背景顏色設(shè)置為藍(lán)色。

同樣，可以用and連接多個(gè)條件，做地更細(xì)化。

@media screen and (min-width:600px) and (max-width:900px){

p{ color:red}

}

意思是對(duì)所有的屏幕，當(dāng)寬度大于在600和900像素之間（包含），將P標(biāo)簽內(nèi)容的顏色設(shè)置為紅色。

需要注意的是，IE一些低版本的瀏覽器如IE6、7、8是不支持媒體查詢的，盡管已經(jīng)很古老，但還是要避免，所以需要先寫一個(gè)基礎(chǔ)的CSS，一些特殊的需要變化的CSS代碼則可以在媒體查詢里。

創(chuàng)建

有了以上的基礎(chǔ)，我們結(jié)合流式布局和柵欄布局概念，就可以自己開著手開發(fā)響應(yīng)式頁(yè)面，當(dāng)然也可以利用其它現(xiàn)有的工具來(lái)提高開發(fā)速度。

目前主流前端UI框架都是響應(yīng)式的，比如Bootstrap、jquery UI、dojo等。下面以Bootstrap為例，師范如何快速創(chuàng)建一個(gè)響應(yīng)式頁(yè)面。

先到bootstrap官網(wǎng)下載響應(yīng)的文件，或者你可以用線上的，不過(guò)還是建議下載到本地。

注意可以把css和js文件路勁換成本地路徑（相對(duì)路徑），其中bootstrap.min.css和bootstrap.min.js是Bootstrap的核心文件，而bootstrap.min.js是依賴于JQ的，所以，JQ必須在bootstrap.min.js之前加載。這樣，你就結(jié)合Bootstrap的柵格系統(tǒng)和各種組件搭建自己的響應(yīng)式頁(yè)面了，另外，如果你覺得Bootstrap的樣式不好看，你可以借助媒體查詢，在bootstrap.min.js之后引入自己的自定義css覆蓋默認(rèn)的樣式。