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

原理

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

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

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

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

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

基礎(chǔ)

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

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

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

兩種思路。

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

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

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

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

body{background-color:blue}

}

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

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

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

p{ color:red}

}

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

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

創(chuàng)建

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

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

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

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