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

原理

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

那么怎么建設響應式頁面布局呢？

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

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

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

基礎

meta標簽設置視口（viewport）

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

視口的寬度獲取是響應式設計的基礎，響應式頁面的響應也就是響應視口寬度的變化。那該如何準確獲取視口寬度呢？

兩種思路。

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

另外一種方式是通過設置HTML meta標簽來約束視口，其實是控制瀏覽器如何來渲染網頁。代碼為：

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

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

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

CSS媒體查詢（Media Query）

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

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

body{background-color:blue}

}

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

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

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

p{ color:red}

}

意思是對所有的屏幕，當寬度大于在600和900像素之間（包含），將P標簽內容的顏色設置為紅色。

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

創建

有了以上的基礎，我們結合流式布局和柵欄布局概念，就可以自己開著手開發響應式頁面，當然也可以利用其它現有的工具來提高開發速度。

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

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

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