響應式佈局

Viewport:是用戶網頁的可視區域。

手機瀏覽器是把頁面放在一個虛擬的"窗口"（viewport）中，一般這個虛擬的"窗口"（viewport）比屏幕寬，這樣就不用把每一個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局），用戶能夠經過平移和縮放來看網頁的不一樣部分。

設置 Viewport

一個經常使用的針對移動網頁優化過的頁面的 viewport meta 標籤大體以下：

• width：控制 viewport 的大小，能夠指定的一個值，若是 600，或者特殊的值，如 device-width 爲設備的寬度（單位爲縮放爲 100% 時的 CSS 的像素）。
• height：和 width 相對應，指定高度。
• initial-scale：初始縮放比例，也便是當頁面第一次 load 的時候縮放比例。
• maximum-scale：容許用戶縮放到的最大比例。
• minimum-scale：容許用戶縮放到的最小比例。
• user-scalable：用戶是否能夠手動縮放。

• 響應式網格視圖

  ---

  建立響應式網格視圖

  接下來咱們來建立一個響應式網格視圖。

  首先確保全部的 HTML 元素都有 box-sizing 屬性且設置爲 border-box。

  確保邊距和邊框包含在元素的寬度和高度間。

  添加以下代碼：

  * {
      box-sizing: border-box;