響應式設計簡介

響應式設計，就是讓同一個頁面在不一樣的分辨率下都要呈現出最佳效果，提高用戶體驗。
很容易想到，設計思路就是針對不一樣的分辨率，爲頁面設置不一樣的樣式，下面咱們就來看看如何實現。不過在此以前，還須要先了解下面兩個東西。

viewport

viewport 就是屏幕上用來顯示頁面內容的那部分區域。 默認狀況下，移動設備上的viewport是大於屏幕寬度的，這是爲了確保可以展現那些針對傳統PC端開發的網頁。大部分移動設備的默認viewport都在980px左右。 這樣就會形成瀏覽器橫向的滾動條出現。有些設備爲了不滾動條出現，會自動縮小網頁內容，使內容適應屏幕寬度，這樣就會形成屏幕上的內容很是小，難以看清。 以上兩種處理方式都不是咱們但願看到的，所以，須要首先將這個viewport設置爲設備的寬度，設置縮放比例爲1：1，代碼以下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

注意：這裏關於viewport的解讀比較簡單，詳細的能夠參考這篇文章。

媒體查詢

媒體查詢是寫在CSS中的一段代碼，做爲其餘CSS代碼的容器。容器中的css代碼只有在媒體查詢條件的狀況下才會生效。例如屏幕寬度<980px，網頁正在打印時等。 有2種方式能夠添加媒體查詢：@media規則和<link>標籤的media屬性。

響應式設計步驟

經過上面介紹，咱們瞭解到響應式設計的第一步須要在頁面中添加以下代碼：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

而後就是設置各個分辨率下的樣式了。但屏幕的分辨率種類實在太多了，咱們不可能一一窮舉出來，也沒有必要這麼作。 實際上能夠將分辨率劃分紅幾個範圍，而後分別設置這幾個範圍內的樣式。不一樣範圍的分界點叫作響應式佈局的 斷點。
關於斷點的選擇，不一樣的前端框架都有各自的選擇，但整體上都是按照手機、平板、PC幾個範圍來的。如bootstrap3的選擇：

• Extra small devices Phones (<768px)
• Small devices Tablets (≥768px)
• Medium devices Desktops (≥992px)
• Large devices Desktops (≥1200px)

斷點（breakpoint）的具體寫法相似以下形式:

@media screen and (min-width:640px) { /CSS 規則/ }