響應式設計是指在不同解析度的設備中，網頁佈局可以自適應的調整。這種彈性化的佈局使網站在不同設備中的佈局都比較合理，可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，其根本理念是使原本 PC 上的網站相容手機和平板。簡單理解就是可以讓一個網站相容多個終端，而不是為每個終端做一個特定的版本，響應式
響應式設計是指在不同解析度的設備中，網頁佈局可以自適應的調整。這種彈性化的佈局使網站在不同設備中的佈局都比較合理，可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，其根本理念是使原本 PC 上的網站相容手機和平板。簡單理解就是可以讓一個網站相容多個終端，而不是為每個終端做一個特定的版本，響應式設計是移動設備快速崛起下的產物，這個概念就是為瞭解決移動互聯網而誕生的。大部分響應式網頁都是通過媒體查詢，根據不同的媒體設備從而載入不同樣式的 CSS 文件來實現的。
1、響應式 Web 設計 - Viewport
(1)、什麼是 Viewport？
viewport 翻譯為中文為"視區/視窗/視口"，就是指用戶網頁的可視區域。手機瀏覽器是把頁面放在一個虛擬的 viewport 中，通常這個虛擬的 viewport 比屏幕寬，這樣就不用把每個網頁擠到很小的視窗中，這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局，用戶可以通過平移和縮放來查看網頁的不同部分。
(2)、設置 Viewport
一個常用的針對移動網頁優化過的頁面的 viewport <meta> 元素大致如下：
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
代碼解析：
width：控制 viewport 的大小，可以是指定的一個值，比如 1920，或者是特殊的值，如 device-width 為設備的寬度，單位為縮放為 100% 時的 CSS 的像素。
height：和 width 相對應，指定高度，可以是指定的一個值，比如 1080，或者是特殊的值，如 device-height 為設備的高度。
initial-scale：初始縮放比例，即當頁面第一次載入是時縮放比例。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
user-scalable：用戶是否可以手動縮放。
2、 響應式 Web 設計 - CSS 柵格系統
(1)、什麼是柵格系統？
柵格系統也叫做網格視圖，即通過固定的格子結構，來進行設計佈局網頁，響應式設計就是網格視圖的實現方式。
很多網頁都是基於網格設計的，這說明網頁是按列來佈局的。使用網格視圖有助於我們設計網頁，這讓我們向網頁添加元素變的更簡單。
響應式網格視圖通常是 12 列，寬度為 100%，在瀏覽器視窗大小調整時會自動伸縮。如下：
響應式設計就是讓一個網站相容多個終端，即為一個頁面設計多種佈局結構，分別適配不同屏幕尺寸的設備，就像下圖顯示這樣：
通過上圖，不難發現一個頁面可以拆分成多個區塊，而這些區塊就構成了網頁的佈局，根據不同的屏幕尺寸，調整這些區塊的排版，就可以實現響應式設計。此外，通過對比上圖中不同設備的區塊位置，當屏幕寬度較大時，區塊傾向於水平分佈，而當屏幕縮小時，區塊則傾向於垂直堆疊。
(2)、創建響應式網格視圖
首先確保所有的 HTML 元素都有 box-sizing 屬性且設置為 border-box。該屬性允許以確切的方式定義適應某個區域的具體內容。當值為 border-box 時，為元素設定的寬度和高度決定了元素的邊框盒。也就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
確保邊距和邊框包含在元素的寬度和高度間，可以添加如下代碼：
1 *{ 2 box-sizing:border-box; 3 }
下麵的例子，是一個簡單的響應式網頁，包含兩列：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"/> 6 <title>簡單的響應式網頁</title> 7 <style> 8 *{ 9 box-sizing:border-box; 10 } 11 .header{ 12 border:1px solid red; 13 padding:15px; 14 } 15 .menu{ 16 width:25%; 17 float:left; 18 padding:15px; 19 border:1px solid red; 20 } 21 .main{ 22 width:75%; 23 float:left; 24 padding:15px; 25 border:1px solid red; 26 } 27 </style> 28 </head> 29 <body> 30 <div class="header"> 31 <h1>頁頭</h1> 32 </div> 33 <div class="menu"> 34 <ul> 35 <li>菜單 1</li> 36 <li>菜單 2</li> 37 <li>菜單 3</li> 38 <li>菜單 4</li> 39 </ul> 40 </div> 41 <div class="main"> 42 <h2>內容</h2> 43 <p>響應式設計是指在不同解析度的設備中，網頁佈局可以自適應的調整。這種彈性化的佈局使網站在不同設備中的佈局都比較合理，可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，其根本理念是使原本 PC 上的網站相容手機和平板。</p> 44 <p>響應式網格視圖通常是 12 列，寬度為 100%，在瀏覽器視窗大小調整時會自動伸縮。</p> 45 </div> 46 </body> 47 </html>
上例中的響應式設計只包含兩列。12 列的網格系統可以更好的控制響應式網頁。
首先我們可以計算每列的百分比：100% / 12 列 = 8.33%，在每列中指定 class， class="col-" 用於定義每列有幾個 span：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"/> 6 <title>簡單的響應式網頁</title> 7 <style> 8 *{ 9 box-sizing:border-box; 10 } 11 .header{ 12 border:1px solid red; 13 padding:15px; 14 } 15 /* 所有列左浮動 */ 16 [class*="col-"]{ 17 float:left; 18 padding:15px; 19 border:1px solid red; 20 } 21 /* 清除浮動 */ 22 .row:after{ 23 content:""; 24 display:block; 25 clear:both; 26 } 27 /* 每列的百分比： */ 28 .col-1{width:8.33%;} 29 .col-2{width:16.66%;} 30 .col-3{width:25%;} 31 .col-4{width:33.33%;} 32 .col-5{width:41.66%;} 33 .col-6{width:50%;} 34 .col-7{width:58.33%;} 35 .col-8{width:66.66%;} 36 .col-9{width:75%;} 37 .col-10{width:83.33%;} 38 .col-11{width:91.66%;} 39 .col-12{width:100%;} 40 </style> 41 </head> 42 <body> 43 <div class="header"> 44 <h1>頁頭</h1> 45 </div> 46 <div class="row"> 47 <!-- <div class="menu"> --> 48 <div class="col-3"> 49 <ul> 50 <li>菜單 1</li> 51 <li>菜單 2</li> 52 <li>菜單 3</li> 53 <li>菜單 4</li> 54 </ul> 55 </div> 56 <!-- <div class="main"> --> 57 <div class="col-9"> 58 <h2>內容</h2> 59 <p>響應式設計是指在不同解析度的設備中，網頁佈局可以自適應的調整。這種彈性化的佈局使網站在不同設備中的佈局都比較合理，可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，其根本理念是使原本 PC 上的網站相容手機和平板。</p> 60 <p>響應式網格視圖通常是 12 列，寬度為 100%，在瀏覽器視窗大小調整時會自動伸縮。</p> 61 </div> 62 </div> 63 </body> 64 </html>
代碼解析：
每一行使用 <div> 包裹，所有列數加起來應為 12：
1 <div class="row"> 2 <div class="col-3">...</div> 3 <div class="col-9">...</div> 4 </div>
指定所有的列向左浮動，間距（padding）為 15px：
1 [class*="col-"]{ 2 padding:15px; 3 border:1px solid red; 4 float:left; 5 }
因為設置了浮動，所以需要清除浮動的影響，使用 :after 偽元素來清除浮動：
1 .row:after{ 2 content:""; 3 display:block; 4 clear:both; 5 }
最後給這個簡單的響應式網頁添加一些樣式和顏色，可在 Chrome 的開發者工具中或在 Firefox 的開發者中選擇響應式設計視圖，調整顯示設備的尺寸來查看效果。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"/> 6 <title>簡單的響應式網頁</title> 7 <style> 8 *{ 9 box-sizing:border-box; 10 } 11 .header{ 12 padding:15px; 13 background-color:#9933cc; 14 color:#ffffff; 15 } 16 /* 所有列左浮動 */ 17 [class*="col-"]{ 18 float:left; 19 padding:15px; 20 } 21 /* 清除浮動 */ 22 .row:after{ 23 content:""; 24 display:block; 25 clear:both; 26 } 27 /* 每列的百分比： */ 28 .col-1{width:8.33%;} 29 .col-2{width:16.66%;} 30 .col-3{width:25%;} 31 .col-4{width:33.33%;} 32 .col-5{width:41.66%;} 33 .col-6{width:50%;} 34 .col-7{width:58.33%;} 35 .col-8{width:66.66%;} 36 .col-9{width:75%;} 37 .col-10{width:83.33%;} 38 .col-11{width:91.66%;} 39 .col-12{width:100%;} 40 41 .menu ul{ 42 list-style-type:none; 43 margin:0; 44 padding:0; 45 } 46 .menu li{ 47 padding:8px; 48 margin-bottom:7px; 49 background-color:#33b5e5; 50 color:#ffffff; 51 box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 52 } 53 .menu li:hover{ 54 background-color:#0099cc; 55 } 56 </style> 57 </head> 58 <body> 59 <div class="header"> 60 <h1>頁頭</h1> 61 </div> 62 <div class="row"> 63 <!-- <div class="menu"> --> 64 <div class="col-3 menu"> 65 <ul> 66 <li>菜單 1</li> 67 <li>菜單 2</li> 68 <li>菜單 3</li> 69 <li>菜單 4</li> 70 </ul> 71 </div> 72 <!-- <div class="main"> --> 73 <div class="col-9"> 74 <h2>內容</h2> 75 <p>響應式設計是指在不同解析度的設備中，網頁佈局可以自適應的調整。這種彈性化的佈局使網站在不同設備中的佈局都比較合理，可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，其根本理念是使原本 PC 上的網站相容手機和平板。</p> 76 <p>響應式網格視圖通常是 12 列，寬度為 100%，在瀏覽器視窗大小調整時會自動伸縮。</p> 77 </div> 78 </div> 79 </body> 80 </html>
3、響應式 Web 設計 - 媒體查詢
使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。
(1)、CSS3 @media 查詢
@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。
當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
註意：IE9+ 以及所有瀏覽器都支持 @media 規則。
CSS 語法：
1 @media mediatype and|not|only (media feature){ 2 ... 3 }
