響應式網頁僅使用HTML+CSS進行設計，其內容會隨著裝置尺寸自動的resize以適應裝置顯示能力。通常它能夠在各種型別的媒介上均呈現出很好的佈局效果，可以為絕大多數或所有的使用者帶來最好的使用者體驗。

• viewport是指使用者對網頁的可視區域。HTML5引入的新方法控制viewport。即在head中引入以下標籤：

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

  此處使用width=device-width將頁面寬度與裝置寬度相關聯，initial-scale定義了頁面初始尺寸。

  關於viewport需要注意以下幾點：

  • 不要使用大的固定寬度的元素；
  • 不要使內容依賴於一個特定檢視寬度進行渲染；
  • 使用@media屬性適應不同螢幕尺寸的樣式；

• 柵格化的試圖
  柵格化的檢視中，網頁被分為等寬的12列，總寬度為100%,平均列寬為8.33%。內容根據柵格進行佈局，採用平均列寬的倍數，resize時柵格相應變化也會被resize。

• Media Query
  Media Query是CSS3引入的新技術，相應的元素為@media。其使用方法如下：

  @media mediaType and|not|only (media feature) {
  //CSS樣式;
  }
  

  其中可用的mediaType有all/ print/ screen/ speech;邏輯判斷關鍵字and/ not/ only；媒體特徵定義輸出裝置的一些特徵：如max-width/ min-width/ width/ height/ max-resolution等等。
  該表示式表明當滿足圓括號內指定的媒體特徵時，執行花括號內的CSS程式碼；利用該特性可以方便的進行內容的響應式佈局。

• 響應式的圖片
  設定如下可以使圖片隨著viewport的大小resize，並且可以超過圖片本身的尺寸大小；

  img {
  width: 100%;
  height: auto;
  }

  如果讓圖片響應的同時不超過原大小，使用max-width

  img {
  width: 100%;
  height: auto;
  }

  當背景為圖片並且background-size設定不同的屬性值時，其響應方式有區別：

  • background-size = contain時，圖片可以進行縮放，不能進行拉伸，並且縮放時保持寬高比；
  • background-size = 100% 100%時，此時可以縮放或者拉伸，但是圖片高度不變；
  • background-size = cover時，可以縮放或者拉伸，但是保持aspect-ratio，因此會發生圖片clip；

  當然還可以使用HTML5新增的為尺寸的裝置定義不同的背景圖片。當裝置頁面寬度小於400時採用smallflower作為背景圖片。

  <picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
  </picture>

• 響應式視訊
  與圖片類似，設定如下：

  video {
  width: 100%;
  height: auto;
  }

  video {
  max-width: 100%;
  height: auto;
  }

當然，也可以使用Bootstrap等框架進行響應式佈局，更多模板和練習可以點選此處